Thread by @jsunderhood

JavaScript и Браузер #тред

За 30 лет с момента появления 1ого браузера многое изменилось. Браузеры сегодня это очень сложное прикладное ПО. Об этом можно даже судить в 1ом приближении по кол-ву строк кода

How Many Millions of Lines of Code Does It Take (February 8, 2017)
visualcapitalist.com/millions-lines…

Ни для кого не станет открытием, если я напишу, что на текущий момент браузер Google Chrome, является самым популярным, более того, он занимает около 2/3 рынка.

Браузер Google Chrome (как Opera и Microsoft Edge), основаны на проекте Chromium. Отсюда изучая проект Chromium, в частности документацию Design Documents, вы погружаетесь в устройство современных браузеров.

chromium.org/developers/des…

У chromuim multiprocess архитектура

Используются отдельные процессы для вкладок браузера, что защитит все приложение от ошибок и сбоев при рендеринге. Ограничивается доступ из каждого процесса рендеринга до других процессов и остальной системы браузера

medium.com/@zicodeng/expl…

Все то, что отображается во вкладке браузера, грубо говоря, делает движок для рендеринга - Blink, форк WebCore

Blink реализует HTML спецификации, занимается работой с DOM деревом, пересчитывает стили и layout, встраивает V8 и запускает JavaScript и тд

bit.ly/how_blink_works

Касательно процессов, пользователь вполне может их сам увидеть в "диспетчере задач" Google Chrome

helgeklein.com/blog/2019/01/m…

Касательно HTML. Как правило, мнение обывателя относительно HTML, что это что-то про верстку, хотя сейчас это есть ни что иное как набор спецификаций, более того описывающий некоторые API

HTML спеки: w3.org/TR/?title=html

Картинка отсюда: de.wikipedia.org/wiki/HTML5

Важным понятием в рендеринге для Frontend-разработчика является - Critical Rendering Path.

Процесс c момента получения HTML, CSS, JS до момента отрисовки пикселя на экране монитора

слайды: bit.ly/lifeofapixel
видео: bit.ly/loap-2018-video

Или вот, есть русская мини страничка о CRP на MDN:
developer.mozilla.org/ru/docs/Web/Pe…

Рекомендую БЕСПЛАТНЫЙ курс от Google разработчиков для понимания, что это, как его оптимизировать, чтобы ваше web-приложение было производительнее, если есть проблемы в CRP
classroom.udacity.com/courses/ud884

1/2 Напомню, что Blink движок для рендеринга, V8 - JavaScript-движок. V8 ничего не знает о DOM.

Как связаны V8 и Blink? Присутствует изолирование потоков, есть 3 вида (Main, Isolate, Worker). Есть понятие контекст - глобальный объект (на каждый iframe)

bit.ly/how_blink_works

2/2 Есть понятие World для поддержки content scripts, необходимых для разделение DOM с веб-страничкой. Для разделения DOM тоже существует изоляция для безопасности.
Плюс присутствует обертка над V8 APIs

Подробности в Design Documents
bit.ly/how_blink_works

Есть еще детали того встраивается V8, но повторюсь читайте Chromium Design Documents..

По итогу всех обвязок для JavaScript-мира в Chrome доступно множество API: упомянутый V8 API, XMLHttpRequest, HTML5 и связанные с ним API, WebKit API и так далее

developer.chrome.com/extensions/api…

Как ни странно, но реализация именно HTML спецификации внутри браузера, дает JavaScript всеми любимый Event Loop. Описание модели вычислений Event Loop в спеке можно уместить в несколько печатных страниц

html.spec.whatwg.org/multipage/weba…

За внедряемыми фичами JS можно следить как по отдельности

v8: v8.dev/features
blink: bit.ly/blinkintents

так и за всеми сразу, как они попадают в Chrome:
chromestatus.com/features
chromestatus.com/features/sched…

В завершении треда хочу поделится русскоязычным докладом: "О настоящем и будущем браузера Yandex браузера".

Довольно интересно было узнать о реализованных оптимизациях рендеринга в браузере