Браузерные движки и их особенности в веб-приложениях

Три презентации с выступлений наших фронтенд-разработчиков Надира Джилкибаева, Дениса Лобанова и Ильи Немировича на Frontend Conf (Москва, 4–5 октября 2018).

1. Как работает браузер Надир Джилкибаев Руководитель отдела веб-разработки Frontend Conf 4 октября 2018 года
2. Почему это нужно знать?  Раз дело любимое, знать надо все  Показатель квалификации  Оперативная диагностика 2 | 17
3. Отображение страницы 1. Разбор HTML и построение DOM- и CSSOM-деревьев 2. Построение дерева отображения 3. Построение макета 4. Отрисовка Происходит каждый раз, когда надо отобразить HTML-документ Спойлер: доклад про ускорение работы страницы на нашем стенде в 15:45 3 | 17
4. Движок, на примере WebKit 4 | 17
5. Разбор HTML 5 | 17
6. DOM tree + CSSOM tree = Render tree 6 | 17
7. Построение макета (Layout)  Определяются размеры и расположение блоков  Слева направо и сверху вниз  Поточная модель: большинство элементов в один проход. Но есть исключения 7 | 17
8. Отрисовка (Painting)  Как и макетирование, отрисовка бывает глобальной и частичной 8 | 17
9. Думали, это все? 9 | 17
10. Упрощенная схема взаимодействия 10 | 17
11. Парсим URL, DNS-кэш 1. Определяем схему, домен, URI 2. Определяем IP-адрес домена 3. IP-адрес попадает в кэш 4. Осуществляется запрос к серверу При изменении IP-адреса домена бывают ситуации, когда старый IP остается в кэше и браузер делает обращения по старому адресу! 11 | 17
12. Повторим про HTTP  Есть запрос и есть ответ  У запросов и ответов есть заголовки и тело  GET, POST, PUT, PATСH, DELETE, HEAD, OPTIONS  Можно придумывать свои заголовки  У ответов есть коды, и нужно не забывать про корректную обработку ответов 12 | 17
13. HTTP, HSTS, HTTPS  Браузер проверяет наличие домена в чек-листе HTTPS  Запрос по HTTP и проверка HSTS-заголовков  Редирект на HTTPS  HTTP текстовый протокол, HTTPS/HTTP 2.0 – бинарные, зашифрованные 13 | 17
14. Потоки  В современных браузерах на каждую вкладку выделяется свой поток для рендеринга и JavaScript  Сетевые запросы выполняются в отдельных потоках. Ограничение – 2-6 потоков на вкладку  Можно порождать свои потоки через воркеры 14 | 17
15. Итог Зная, как процесс работы браузера устроен в глубину и в ширину, можно ловить баги зубами :-) 15 | 17
16. Ссылки  https://www.html5rocks.com/ru/tutorials/internals/ howbrowserswork/  https://github.com/vasanthk/how-web-works  https://blog.apptension.com/2017/09/27/critical- rendering-path/ 16 | 17
17. Спасибо за внимание! Джилкибаев Надир Руководитель отдела веб-разработки custis.ru ndzhilkibaev@custis.ru
18. Производительность визуализации Денис Лобанов Программист отдела веб-разработки Frontend Conf 4 октября 2018 года
19. Производительность «Производительность – это искусство избегать работы и делать любую работу как можно более эффективно» 2 | 13
20. Layout Paint Конвейер прорисовки страницы JavaScript Style Layout Paint Composite 3 | 13
21. Layout Paint Оптимизация выполнения JavaScript requestAnimationFrame вместо setTimeout и setInterval function updateScreen(time) { } requestAnimationFrame(updateScreen); JavaScript Style Composite 4 | 13
22. Оптимизация выполнения JavaScript Используйте Web Worker var dataSortWorker = new Worker("sort-worker.js"); dataSortWorker.postMesssage(dataToSort); // The main thread is now free to continue working on other things... dataSortWorker.addEventListener('message', function(evt) { var sortedData = e.data; // Update data on screen... }); 5 | 13
23. «Приблизительно 50% времени, которое тратится на вычисление стиля элемента, уходит на сопоставление селекторов, а вторую половину времени занимает построение RenderStyle (представления стиля) на основе сопоставленных правил». Rune Lillesveen, Opera Оптимизация CSS Layout Paint JavaScript Style Composite 6 | 13
24. Оптимизация CSS .box:nth-last-child(-n+1) .title { /* styles */ } .final-box-title { /* styles */ } Снижайте сложность своих селекторов 7 | 13
25. Layout Style JavaScript Оптимизация расчета макета Не используйте принудительный перерасчет макета requestAnimationFrame(logBoxHeight); function logBoxHeight() { console.log(box.offsetHeight); } box.classList.add('super-big'); JavaScript Layout Paint Composite Style 8 | 13
26. Оптимизация расчета макета Не используйте принудительный перерасчет макета requestAnimationFrame(logBoxHeight); function logBoxHeight() { console.log(box.offsetHeight); box.classList.add('super-big'); } 9 | 13
27. Оптимизация расчета макета Принудительный перерасчет макета в цикле function resizeAllParagraphsToMatchBlockWidth() { // Puts the browser into a read-write-read-write cycle. for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = box.offsetWidth + 'px'; } } 10 | 13
28. Оптимизация расчета макета Принудительный перерасчет макета в цикле var width = box.offsetWidth; function resizeAllParagraphsToMatchBlockWidth() { for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } } 11 | 13
29. Оптимизация отрисовки  Перемещайте на отдельные слои элементы, которые двигаются или исчезают .moving-element { will-change: transform; }  Сокращайте области отрисовки 12 | 13 Layout Paint JavaScript Style Composite
30. Спасибо за внимание! custis.ru flikc8668@gmail.com Денис Лобанов Программист отдела веб-разработки
31. Что такое воркеры и куда их запихнуть? Илья Немирович Старший фронтенд-разработчик Frontend Conf 5 октября 2018 года
32. Простой пример var worker = new Worker('task.js'); worker.postMessage(); 2 | 12
33. Основные виды  Выделенные воркеры (Dedicated Workers)  Разделяемые воркеры (Shared Workers)  Сервис-воркеры (Service Workers) 3 | 12
34. Что воркеры умеют  navigator  location  indexedDB  XHR, websocket  importScripts  создание Worker 4 | 12
35. Что воркеры не умеют  DOM  Объект window  Объект document  Объект parent  responseXML и channel возвращают null 5 | 12
36. С чем же воркеры хорошо справляются? 6 | 12
37. Оптимизация сложных вычислений  Обработка медиаданных  Сквозное шифрование  Проверка правописания 7 | 12
38. Операции с данными  Предварительная загрузка данных  Кэширование 8 | 12
39. Повышение интерактивности  Push-уведомления  Офлайн-режим  Синхронизация вкладок 9 | 12
40. Как не надо использовать воркеры  Использовать их ради самого факта использования 10 | 12
41. Вывод  Воркеры улучшают отзывчивость  Повышают интерактивность  Но потребляют дополнительные ресурсы 11 | 12
42. Спасибо за внимание! Илья Немирович Старший фронтенд-разработчик custis.ru inemirovich@custis.ru