Сегодня практически невозможно представить мир без Интернета. А браузер - это наш интерфейс для Интернета. Он обрабатывает поиск, представление и обход этого контента. Я думаю, мы все считаем само собой разумеющимся, что когда мы нажимаем Enter в адресной строке браузера, происходит волшебство.
Но знаете ли вы, как это работает на самом деле? Как он превращает строку HTML в структуру данных? Где в игру вступают CSS и JavaScript?
Основные компоненты современных веб-браузеров можно разбить на следующие области:
ПОЛУЧИТЬ
Сетевой уровень: отвечает за получение данных с соответствующих веб-серверов. Сетевой уровень принимает URL-адреса через адресную строку и извлекает ресурсы по протоколам HTTP / FTP. После возврата ресурса этот слой передает данные в наш механизм рендеринга. Сетевой уровень играет важную роль в нашем взаимодействии с пользователем, поскольку он может стать узким местом в производительности сети, пока мы ждем запрошенного удаленного контента.
ПРОЦЕСС
Фаза обработки принимает данные из нашего сетевого уровня и питает наши подсистемы отображения.
Механизм обработки: отвечает за фактическое отображение веб-страницы. Механизмы рендеринга анализируют HTML и CSS и отображают проанализированный контент вам.
Анализатор HTML браузеров преобразует элементы HTML в узлы DOM в дереве, которое называется деревом содержимого. Тем временем синтаксический анализатор CSS анализирует наши таблицы стилей и встроенные элементы стилей для создания правил стилей страниц. Эта информация о стиле сочетается с визуальными инструкциями из нашего HTML и используется для создания другого дерева - дерева рендеринга.
Это дерево рендеринга затем открывается нашему JS. И, наконец, как только дерево рендеринга построено, оно подвергается процессам компоновки и рисования, а результат отображается на экране.
Кстати, если вы когда-нибудь задумывались, почему Chrome уничтожает вашу оперативную память, то это потому, что браузер Chrome фактически запускает несколько экземпляров механизма рендеринга: по 1 для каждой вкладки.
Механизм JavaScript: отвечает за чтение и выполнение нашего кода Javascript. Движки - это те, которые на самом деле должны реализовывать стандарты ECMAScript, определенные комитетом TC39 (без этого JavaScript был бы просто набором странных фигурных скобок и точек с запятой).
Так что же на самом деле делает двигатель? Он анализирует наш код Javascript на машинный код, а затем выполняет его.
Наш движок сначала анализирует наш файл и генерирует узлы на основе полученных токенов. С помощью этих узлов создается абстрактное синтаксическое дерево (AST).
Следующим в потоке идет интерпретатор, он анализирует AST и генерирует байтовый код. Интерпретатор быстро создает неоптимизированный машинный код и может без промедления начать работу. Профилировщик оценивает этот код во время его выполнения и ищет области для оптимизации.
Благодаря поддержке профилировщика любой неоптимизированный код передается в компилятор для выполнения улучшений и создания машинного кода, который в конечном итоге заменяет его эквивалент в ранее созданном неоптимизированном коде интерпретатором. .
Замечание о фазе компиляции: JS динамически типизируется, что упрощает нашу жизнь как разработчиков, поскольку нам не нужно беспокоиться о типах. Но если вы компилятор, это плохая новость, потому что мы не уделяем этому много внимания, и это чрезвычайно затрудняет создание быстрого машинного кода. Наши JS-движки работают над этим, используя компиляцию точно в срок (JIT), которая позволяет им оптимизировать производительность. (Все JIT означает, что компилятор будет генерировать машинный код во время выполнения, а не раньше времени).
Большинство современных движков имеют как минимум 2 компилятора, один из которых является оптимизирующим компилятором. Это делается путем повторной компиляции «горячих» (функций, которые вы часто используете и в результате заслуживают ускорения) функций с информацией о типе из предыдущего выполнения. Если в какой-то момент тип изменился, он деоптимизируется и вернется к компилятору baseline.
Backend пользовательского интерфейса: используется для рисования основных виджетов, таких как поля со списком, всплывающие окна и предупреждения. Этот бэкэнд предоставляет общий интерфейс, не зависящий от платформы. Внизу используются методы пользовательского интерфейса операционной системы.
Медийная реклама
Пользовательский интерфейс и движок браузера несут ответственность за представление всех этих данных пользователю.
Пользовательский интерфейс: сюда входят такие вещи, как адресная строка, кнопки вперед / назад / обновления, меню избранного и т. д. Практически все, что вы видите, кроме самой веб-страницы. Пользовательские интерфейсы браузера имеют много общего друг с другом, несмотря на то, что на самом деле нет конкретных стандартов того, как должен выглядеть пользовательский интерфейс.
Движок браузера: обрабатывает взаимодействие между пользовательским интерфейсом и движком рендеринга. Движок поддерживает основные действия при просмотре, такие как переход вперед, назад и перезагрузка.
Место хранения
Хранение данных: это постоянный уровень. Это достигается с помощью различных API-интерфейсов браузера. Некоторые из них включают: локальное хранилище, хранилище сеансов, файлы cookie, WebSQL, IndexedDB, FileSystem, AppCache.
Заключение
Надеюсь, теперь вы немного лучше понимаете, что происходит внутри, и понимаете, что браузеры на самом деле являются одним из самых сложных приложений, которые мы используем ежедневно.
Дополнительные ресурсы:
