Как работает браузер

Выступление наших фронтенд-разработчиков Надира Джилкибаева и Дениса Лобанова на конференции Yappi Days (Ярославль, 3 ноября 2018).

1. Как работает браузер Надир Джилкибаев, Денис Лобанов Веб-разработчики Yappi Days 3 ноября 2018 года
2. Надир Джилкибаев Руководитель отдела веб-разработки в компании CUSTIS Занимаюсь разработкой веб- приложений с тех пор, когда была популярна профессия веб-мастера
3. Денис Лобанов Веб-программист в компании CUSTIS Занимаюсь разработкой веб-приложений с 2015 года. Знаю о становлении веба только из рассказов старцев
4. Немного цифр  TAdviser: 53 % населения планеты или 4,021 млрд чел. – пользователи интернета  Google Play: браузер Chrome Mobile установлен на устройства с Android более 1 млрд раз
5. Зачем нужны браузеры?  Смотреть сайты на компьютере (обычно порно)  Различные встраиваемые решения  Гибридные приложения THEY TOOK OVER THE WORLD
6. Путь веб-разработчика  Изучить HTML, CSS  Понять JS  Освоить Chrome DevTools  WebPack, Less, Sass  Angular, React, Vue А где пункт «Изучить принципы работы движка браузера»? В какой момент этому следует уделить время?
7. Сегодня. Здесь. Сейчас. – Готовы?! –
8. Почему это надо знать?  Раз дело любимое, знать надо все  Квалификация  Оперативная диагностика
9. Упрощенная схема взаимодействия
10. После ввода URL в адресную строку 1. Определяем схему, домен, URL 2. (Не забываем про Deep Linking) 3. Определяем IP-адрес домена 4. IP-адрес попадает в кэш 5. Запрос к серверу ! При изменении IP-адреса у домена бывают ситуации, когда старый IP остается в кэше и браузер делает обращения по старому адресу!
11. Deep Linking 1. Пользователь переходит по URL 2. Ресурс определяет ОС 3. На основе полученных данных выполняется переход в приложение
12. HTTP  Есть запрос и ответ  Есть заголовки и тело  Можно придумывать свои заголовки
13. HTTP: запросы  Хост  GET, POST, PUT, PATСH, DELETE, HEAD, OPTIONS  Ограничение на размер URL  Бонус: у GET есть тело запроса
14. HTTP: ответы  У ответов есть коды  Не забывайте про корректную обработку ответов  Бонус: TODO
15. HTTPS  Асимметричная криптография для аутентификации ключей обмена  Симметричное шифрование для сохранения конфиденциальности  Коды аутентификации сообщений для целостности сообщений  Защищает от атаки man-in-the-middle
16. HTTP, HSTS, HTTPS  Браузер проверяет наличие домена в чек-листе HTTPS  Редирект на HTTPS  Запрос по HTTP и проверка HSTS-заголовков  HTTP – текстовый протокол, HTTPS/HTTP 2.0 – бинарные, зашифрованные
17. Отображение страницы 1. Провести парсинг HTML 2. Построить DOM tree (document object model) 3. Параллельно запросить связанные ресурсы (CSS, JS, img) 4. Построить CSSOM tree 5. Выполнить весь полученный JS-код 6. Перестроить DOM tree (при необходимости) 7. Стартует конвейер визуализации
18. Движок, на примере WebKit
19. Парсинг HTML и DOM tree
20. DOM + CSSOM = Render Tree
22. Немного цифр  Экраны большинства устройств обновляются 60 раз в секунду  У браузера есть около 16,5 мс для формирования кадра
23. Конвейер прорисовки страницы 1. Выполнение JavaScript 2. Вычисление стилей 3. Расчет макета 4. Прорисовка 5. Компоновка
24. Выполняем JavaScript
25. Оптимизация выполнения JavaScript requestAnimationFrame вместо setTimeout и setInterval function updateScreen(time) { } requestAnimationFrame(updateScreen);
26. Используйте Web Worker var dataSortWorker = new Worker("sort-worker.js"); dataSortWorker.postMesssage(dataToSort); dataSortWorker.addEventListener('message', function(evt) { var sortedData = e.data; }); Оптимизация выполнения JavaScript
27. Вычисление стилей (CSS)
28. «Приблизительно 50 % времени, которое тратится на вычисление стиля элемента, уходит на сопоставление селекторов, а вторую половину времени занимает построение RenderStyle (представления стиля) на основе сопоставленных правил» Rune Lillesveen, Opera Вычисление стилей (CSS)
29. .box:nth-last-child(-n+1) .title { /* styles */ } .final-box-title { /* styles */ } Снижайте сложность своих селекторов Оптимизация CSS
30. Построение макета (Layout)  Определяются размеры и расположение блоков  Перерасчет макета обычно выполняется для всего документа целиком
31. Не используйте принудительный перерасчет макета requestAnimationFrame(logBoxHeight); function logBoxHeight() { box.classList.add('super-big'); console.log(box.offsetHeight); } Оптимизация расчета макета
32. Решение: requestAnimationFrame(logBoxHeight); function logBoxHeight() { console.log(box.offsetHeight); box.classList.add('super-big'); } Оптимизация расчета макета
33. Принудительный перерасчет макета в цикле 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'; } } Оптимизация расчета макета
34. Решение: var width = box.offsetWidth; function resizeAllParagraphsToMatchBlockWidth() { for (var i = 0; i < paragraphs.length; i++) { paragraphs[i].style.width = width + 'px'; } } Оптимизация расчета макета
35. Отрисовка (Painting)  Так же, как и макетирование, отрисовка бывает глобальной и частичной  Зачастую этот процесс занимает больше всего времени
36. Перемещайте на отдельные слои элементы, которые двигаются или исчезают .moving-element { will-change: transform; } Оптимизация отрисовки
37. Сокращайте области отрисовки Оптимизация отрисовки
38. Потоки  В современных браузерах на каждую вкладку выделяется свой поток для рендеринга и JS  Сетевые запросы выполняются в отдельных потоках (ограничение: 2–6 потоков на вкладку)  Можно порождать свои потоки через воркеры
39. Итог Теперь мы знаем:  URL лучше меньше, чем больше 2кб  Ссылки бывают глубокими  С браузером можно и нужно дружить
40. Ссылки  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/  https://docs.google.com/document/d/1vEW86DaeVs4uQzNFI5R-_xS9TcS1Cs_EUsHRSgCHGu8
41. Спасибо за внимание! ndzhilkibaev@custis.ru dlobanov@custis.ru Надир Джилкибаев, Денис Лобанов Веб-разработчики