(Как браузер отображает веб-страницу?)

Базовый обзор

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

Интерпретатор Javascript: это еще один ключевой компонент, используемый движком рендеринга. Как вы все знаете, если вы разрабатывали какую-либо веб-страницу раньше, в веб-браузере постоянно выполняется множество скриптов, поэтому вам нужен действительно действительно быстрый способ интерпретации и выполнения javascript.

Backend пользовательского интерфейса: он делает настоящий рисунок. Вы говорите пользовательскому интерфейсу, что я хочу увидеть прямоугольник, и вы увидите прямоугольник на своем экране.

Данные: у нас есть уровень сохранения данных в браузерах, потому что браузеры также сохраняют много информации. Каждый раз, когда вы заходите на веб-сайт, вы входите в систему, вы нажимаете кнопку «Запомнить меня», которая фактически сохраняет небольшой объем данных в вашем браузере. На самом деле это файлы cookie. Браузер также сохраняет случайные данные, такие как история поиска, которую вы очень часто очищаете, но всегда есть набор данных, которые браузер сохраняет сам.

Что на самом деле происходит? Как браузер отображает веб-страницу на экране?

Шаг 1. Сбор ресурсов.

Если мы хотим что-то отобразить, нам нужно что-то отобразить. И для веб-браузеров, которые будут веб-страницами. Итак, все дело в том, что веб-браузер использует свой сетевой модуль, чтобы просто получить все различные ресурсы в Интернете, он включает файлы HTML, файлы CSS, изображения и прочее.

Шаг 2: Анализ HTML и создание дерева DOM:

Если вы когда-либо видели или писали HTML раньше, я уверен, вы знаете, что это становится довольно сумасшедшим, есть много тегов, есть больше тегов, вложенных в эти теги, и есть еще теги, вложенные в эти теги. HTML создает огромную древовидную структуру. Я надеюсь, что очевидно, как вложенность по своей сути создает древовидную структуру. Мы начинаем с этого корневого узла, и у нас как бы есть теги внутри этого корня, и эти теги имеют больше тегов, и эти теги имеют больше тегов, по сути, это просто разворачивается из одного центрального места, создавая дерево. Как только мы создадим это дерево, оно будет состоять из элементов DOM. DOM означает объектную модель документа, и все дерево состоит из этих элементов.

В этом шаге замечательно то, что, поскольку HTML действительно действительно гибкий, этот синтаксический анализ также очень гибкий, поэтому часто, когда разработчики пишут действительно дерьмовый HTML, мы забываем закрыть тег, мы делаем ошибки в некоторых вещах, возможно, вложенность не совсем правильная но браузер может обрабатывать много дерьмового HTML. Например, когда вы забываете тег, он не просто разбивает всю страницу, в этом синтаксическом анализе выполняется множество проверок ошибок, что позволяет браузеру очень гибко реагировать на ошибки, которые допускают разработчики. Итак, просто повторю, что вся цель шага 2 - получить все эти ресурсы из шага 1, весь этот HTML, и мы собираемся создать дерево объектов DOM.

Шаг 3. Создайте дерево отрисовки из дерева DOM.

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

Шаг 4: Макет:

В конце третьего шага у нас есть это безумное новое дерево со всеми этими разными стилями, но нам нужно расположить их и задать размер, чтобы мы могли их где-то разместить. На этом этапе макета все находится в контексте прямоугольника, квадрата или прямоугольника. Есть несколько разных способов описать коробку: вы можете дать ей четыре разных точки или одну точку с размерами. Надеюсь, вы, ребята, интуитивно понимаете, что делает этот шаг. На шаге 3 все стили помещаются в одно дерево рендеринга, а на шаге 4 выясняется их точное положение и место на экране.

Шаг 5. Рисование.

Он в значительной степени берет всю информацию и отправляет ее в бэкэнд пользовательского интерфейса, чтобы на самом деле рисовать на экране или позволять вам это видеть, что на самом деле происходит, так это то, что основной пользовательский интерфейс полностью проникает в вашу операционную систему или до вашей графики. библиотеки и фактически использует функции рисования, чтобы выводить объекты на экран. Еще одна вещь, которую выполняет этот пользовательский интерфейс, или часть рисования, или эта часть рисования, - это обработка размеров Z. Итак, во время макета все размещается по XY, но также у вас есть концепция размеров Z или чего-то еще, что перекрывается. Итак, представьте себе две коробки, и они на самом деле занимают одинаковое количество места, но одна коробка находится над другой. Движок пользовательского интерфейса должен быть достаточно умен, чтобы распознавать, что закончилось, а что внизу, чтобы он не отображал нижнее. Итак, это был шаг 5: вся эта информация о макете, вся информация о стиле передается в бэкэнд пользовательского интерфейса для фактического физического рисования, чтобы вы могли видеть это на своем экране.

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

Только представьте, что вы нажимаете небольшую кнопку на веб-странице, и эта маленькая кнопка фактически выполняет сценарий, который изменяет древовидную структуру, веб-браузер должен как можно скорее распознать это изменение в древовидной структуре и повторно отобразить все, чтобы вы могли посмотрите, что произойдет после того, как вы нажмете эту кнопку. Это происходит не только тогда, когда скрипты выполняются или вы нажимаете кнопки, но представьте, что вы просто перетаскиваете веб-браузер с помощью мыши, каждый раз, когда вы перетаскиваете веб-браузер с помощью мыши, на самом деле ему приходится менять макет некоторых вещей, но этого просто не происходит. t оставаться на месте, когда вы таскаете вещи. Есть группы людей, которые работают над каждым веб-браузером, работают над различными компонентами веб-браузера, пишут миллионы строк кода, чтобы делать правильные вещи для своего компонента, и все это объединяется в этом Chrome.