Веб-браузер получает файл с сервера или локального диска и загружает его. Он использует движок браузера, чтобы сделать это за кулисами. Движок Chrome называется Blink, который является всего лишь реализацией WebKit, движка Apple.

Механизм браузера получает необработанные байты данных, как правило, в виде данных, передаваемых по сети. Таким образом, первая задача веб-браузера — преобразовать эти необработанные данные во что-то, что браузер может прочитать, то есть в объектную модель документа (DOM).

Для этого движок браузера начнет с преобразования этих данных в символы. Помните кодировку, которую вы установили в верхней части вашего HTML-файла? Это то, что ваш браузер будет кодировать эти данные в символы.

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

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

Тем временем к источнику ваших данных отправляется запрос на выборку для каждой ‹ссылки›, найденной в каждом из ваших файлов .html, и именно так стили CSS включаются в процесс.
Как и в случае с вашим HTML, данные CSS принимаются вашим браузером. Эти данные преобразуются в символы, затем размечаются в соответствии с соглашениями файла .css и превращаются в узлы. Затем эти узлы также превращаются в древовидную структуру. Очень похоже на то, что было создано с помощью HTML, DOM, с помощью CSS, у вас есть объектная модель каскадных таблиц стилей (CSSOM).

Из этих двух древовидных моделей, DOM и CSSOM, браузер создает Дерево рендеринга. Дерево рендеринга содержит все видимое содержимое DOM на странице и информацию CSSOM для каждого из этих узлов. Таким образом, если элементу присвоен атрибут display: none;, он не будет добавлен в дерево рендеринга, несмотря на то, что этот узел HTML создается в DOM, а этот узел атрибута создается в CSSOM. Определено, что он невидим и, следовательно, не включен в дерево рендеринга, которое содержит все видимые узлы.
Во время создания дерева рендеринга на экране пользователя еще ничего не отображалось. Тот факт, что у нас есть список видимых элементов и атрибутов, перечисленных в дереве рендеринга, не означает, что браузер точно знает, где на странице находится каждый элемент. Макет страницы — это следующая вещь, за которую отвечает браузер. На этом шаге Reflow браузер берет все стили макета, прикрепленные ко всем видимым элементам в дереве рендеринга, и вычисляет их положение на странице. После перекомпоновки у браузера теперь есть все необходимое для рендеринга или отрисовки всех элементов в дереве рендеринга на экране, чтобы пользователь мог наконец их увидеть.
Итак, когда вступает в игру реальная функциональность? Потому что у нас, скорее всего, также есть Javascript, и он будет внутри тега ‹script› в нашем файле .html.
Каждый раз, когда ваш браузер видит тег ‹script› внутри вашего файла .html, он останавливает построение DOM до тех пор, пока скрипт не завершит выполнение. Вот почему важно, чтобы теги ‹script› находились внизу файла .html. Если вы поместите свой тег ‹script› выше, построение DOM остановится на теге, и если что-то пойдет не так с выполнением вашего скрипта, остальная часть вашего построения DOM может не быть построена. То есть ваша страница может не загружаться или загружаться только частично. С помощью тега ‹script› под всеми вашими HTML-элементами вы позволяете полностью сконструировать DOM до того, как он приостановится для выполнения скрипта. Это позволяет отображать вашу страницу, даже если что-то происходит при выполнении скрипта.

Весь этот процесс использования браузера для получения данных и их отображения на экране для пользователя известен как критический путь рендеринга (CRP). Оптимизация сайта — это оптимизация CRP. Поэтому, когда мы помещаем наши теги ‹script› в конец нашего файла .html или используем async в нашем ‹script› tags — оптимизация CRP.

Подводя итог, пользователь использует свой браузер для запроса данных с веб-сервера. Их браузер получает эти данные в необработанных байтах, которые он не может понять, пока механизм этого браузера не превратит эти данные в символы, не разметит эти символы, а затем не начнет читать полученный файл .html. Он использует этот файл .html для токенизации символов, чтобы собрать каждый элемент в узел. Затем он создает отношения между узлами, создавая из них древовидную модель, известную как DOM. Между тем, как только браузер читает тег ‹link› в этом файле .html, он начинает тот же процесс в связанном файле, даже если связанный файл имеет тег .css расширение. В этом случае вместо создания DOM создается аналогичная модель, известная как CSSOM. Как только все отношения узлов HTML и CSS созданы в соответствующих деревьях, браузер объединяет эти деревья и их соответствующие отношения в дерево рендеринга, которое представляет собой объектную модель, представляющую все видимые элементы, которые должны содержаться на странице. Каждый узел, содержащий свои указанные атрибуты. Затем, когда дерево рендеринга завершено, браузер рисует все элементы на странице и вычисляет положение каждого элемента по отношению к другим элементам.

На этом этапе пользователь может просматривать элементы, содержащиеся в файле, полученном его браузером. Предполагая, что теги ‹script› находятся после всех элементов в файле .html, скрипт выполняется и функциональность страницы добавляется, в противном случае пользователь может искать на частично загруженной странице.

Я надеюсь, что вы нашли эту статью полезной, и спасибо за ваше время. Если у вас есть какие-либо вопросы, комментарии или исправления, все приветствуются, вы можете оставить их ниже или написать мне в LinkedIn.