«Вопрос для интервью» Ввод URL-адреса в комплексный обзор рендеринга — рендеринг страницы

Предварительное знание

Эта статья - вопрос интервью, а не просто вопрос интервью. Разница в том, что этот вопрос разделен на три статьи, гм. . Можно себе представить

Продолжая вышеизложенное, мы говорили о части сетевого взаимодействия выше.Подробности см.«Вопрос для интервью» Ввод URL-адреса для комплексного рендеринга — сетевое общениеЗатем пришло время говорить о процессе рендеринга страниц, то есть когда URL введен, чтобы получить страницу, как проанализирует браузер и представляет его

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

• Концепция потока/процесса и разница
• Концепции многопоточности/многопроцессорности
• Основной процесс браузера
• Почему браузер многопроцессорный?
• Основной поток процесса рендеринга Renderer
  • Поток рендеринга графического интерфейса
  • Поток движка JS
  • поток триггера события
  • Поток триггера по времени
  • Асинхронный поток HTTP-запросов
• Отношения и сотрудничество между потоками процесса рендеринга

предыдущий пост«Хардкорный JS» разбирается в механизме работы JS — ПорталОн представлен в книге, давайте пройдемся еще раз, это не займет много времени, все надо пересмотреть, можно и самому прочитать, чтобы понять, конечно, если вы все об этом знаете, то можете сразу перейти к процесс рендеринга

процесс и поток

что такое процесс

мы все знаем,CPUЭто ядро ​​компьютера, которое выполняет все вычислительные задачи.

официальное заявление,进程даCPUНаименьшая единица распределения ресурсов

Буквально означает незавершенную программу, я понимаю ее как программу-задачу, которая может работать независимо и имеет собственное ресурсное пространство.

进程Включая запущенные программы, а также память и системные ресурсы, используемые программами.

CPUПроцессов может быть много, и каждый раз, когда наш компьютер открывает, программное обеспечение будет генерировать один или несколько进程, почему компьютер работает много программного обеспечения будет зависать, потому чтоCPUкаждому进程Выделить ресурсное пространство, ноCPUВсего ресурсов очень много.进程независимы друг от друга,CPUработает进程, другие процессы находятся в неработающем состоянии,CPUиспользоватьАлгоритм циклического планирования временных интерваловзапускать несколько процессов одновременно

что такое нить

线程даCPUНаименьшая единица планирования

线程Установлено进程На основе одноразового блока запуска программы популярная точка объяснения线程представляет собой поток выполнения в программе,进程может иметь несколько线程

Один进程Существует только один поток выполнения в单线程, то есть при выполнении программы пройденные пути программы располагаются в последовательном порядке, первые должны быть обработаны хорошо, а вторые будут выполняться

Один进程Существует несколько потоков выполнения, называемых多线程, то есть программа может запускать несколько разных программ одновременно线程выполнять разные задачи, то есть разрешить одной программе создавать несколько параллельных исполнений线程выполнять свои задачи

разница между процессом и потоком

Процесс — это наименьшая единица ресурсов, выделяемых операционной системой, а поток — наименьшая единица выполнения программы.

Один进程одним или несколькими线程сочинение,线程Это можно понимать как разные маршруты выполнения кода в процессе.

进程независимы друг от друга, но каждый线程Общая память программы (включая сегменты кода, наборы данных, кучи и т. д.) и некоторые ресурсы уровня процесса (такие как открытые файлы и сигналы)

Планирование и переключение: переключение контекста потока выполняется намного быстрее, чем переключение контекста процесса.

Многопроцессорность и многопоточность

мультипрогресс:Многопроцессность означает, что два или более процессов могут работать в одной и той же компьютерной системе одновременно. Преимущества многопроцессорности очевидны, например, вы можете открывать редактор и набирать код во время прослушивания песен в NetEase Cloud, и процессы редактора и NetEase Cloud не будут мешать друг другу.

Многопоточность:Многопоточность означает, что программа содержит несколько потоков выполнения, то есть программа может одновременно запускать несколько разных потоков для выполнения разных задач, то есть одна программа может создавать несколько параллельных потоков выполнения для выполнения соответствующих задач.

Почему JS однопоточный?

Однопоточность JS связана с его назначением.Как язык сценариев для браузера, основная цель JavaScript — взаимодействовать с пользователями и манипулировать DOM, что определяет, что это может быть только однопоток, иначе возникнут сложные проблемы с синхронизацией.

Например, предположимJavaScriptЕсть два потока одновременно, один поток добавляет содержимое в узел DOM, а другой поток удаляет этот узел.В это время, какой поток должен выбрать браузер?

кто-то другой сказалjsа такжеWorkerТемы, да, чтобы воспользоваться преимуществами вычислительной мощности многоядерных процессоров, HTML5 предлагает стандарт веб-работника, который позволяетJavaScriptСценарий создает несколько потоков, но дочерние потоки полностью контролируются основным потоком и не должны манипулировать DOM.

Таким образом, этот стандарт не меняет природу однопоточности JavaScript.

Разобравшись с процессом и потоком, давайте взглянем на анализ браузеров. Между браузерами тоже есть некоторые пробелы, но они примерно одинаковые. Ниже мы будем использовать Chrome, который имеет наибольшую долю рынка, в качестве примера.

Связанные с браузером

Браузеры являются многопроцессорными

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

Какие процессы включены в браузере

• Браузерный процесс
  • Основной процесс браузера (отвечает за координацию, главный контроль), есть только один процесс
  • Отвечает за отображение интерфейса браузера и взаимодействие с пользователем. например вперед, назад и т.
  • Отвечает за управление каждой страницей, создание и уничтожение других процессов
  • Рендеринг (Renderer), полученный в процессе Bitmap memory (битовая карта), для отрисовки пользовательского интерфейса
  • Управление сетевыми ресурсами, загрузка и т. д.
• Процесс стороннего плагина
  • Каждый тип плагина соответствует процессу, который создается при использовании плагина.
• Процесс графического процессора
  • Существует только один процесс для рисования 3D/анимации и т. д.
• процесс рендеринга (тяжелый)
  • То есть нормально указанный ядра браузера (процесс рендерера, интерьер - это многопоточный)
  • Каждая вкладка имеет процесс рендеринга, который не влияет друг на друга.
  • В основном используется для рендеринга страниц, выполнения скриптов, обработки событий и т. д.

Зачем браузерам нужна многопроцессорность?

Мы предполагаем, что браузер представляет собой один процесс, затем происходит сбой вкладки, что влияет на весь браузер, насколько плох опыт

Точно так же, если плагин выйдет из строя, это также повлияет на весь браузер.

Конечно, есть много других преимуществ многопроцессорности, но более сложные

Существует много процессов браузера, и каждый процесс имеет много потоков, которые будут занимать память.

Это также означает, что потребление ресурсов, таких как память, будет очень большим, а это означает, что пространство обменивается на время.

Это не просто для того, чтобы мы поняли, почему Chrome долго работает и компьютер зависает, ха-ха, первый пункт здесь

Кратко опишите процесс рендеринга Рендерер (тяжелый)

Рендеринг страницы, выполнение JS и зацикливание событий выполняются в процессе рендеринга, поэтому нам нужно сосредоточиться на понимании процесса рендеринга.

Процесс рендеринга является многопоточным. Давайте рассмотрим некоторые общие и основные потоки процесса рендеринга.

Основной поток процесса рендеринга Renderer

Поток рендеринга графического интерфейса

• Отвечает за рендеринг интерфейса браузера, синтаксический анализ HTML, CSS, построение дерева DOM и дерева RenderObject, компоновку и рисование и т. д.
  • Разобрать html-код (HTML-код по сути является строкой) и преобразовать его в узел, распознаваемый браузером, и сгенерировать DOM-дерево, то есть DOM-дерево
  • Разобрать css и сгенерировать CSSOM (дерево правил CSS)
  • Объедините дерево DOM и CSSOM для создания дерева рендеринга.
• Когда мы изменим цвет или цвет фона некоторых элементов, страница будет перекрашена (Repaint)
• Когда мы изменим размер элемента, страница будет перекомпоновываться (Reflow)
• Когда странице требуется REPAING и REFLOW, выполняется поток GUI, рисует страницу
• Reflow дороже, чем перерисовка, мы должны стараться избегать Reflow и Repaint.
• Поток рендеринга GUI и поток движка JS являются взаимоисключающими.
  • При выполнении JS-движка поток графического интерфейса будет приостановлен (эквивалентно замораживанию).
  • Обновления графического интерфейса хранятся в очереди и выполняются, как только движок JS простаивает.

Поток движка JS

• Поток движка JS — это ядро ​​JS, отвечающее за обработку программ-скриптов Javascript (таких как движок V8).
• Поток движка JS отвечает за синтаксический анализ сценариев Javascript и выполнение кода.
• Движок JS ждал поступления задач в очередь задач, а затем обрабатывал их
  • В браузере может быть только один поток JS-движка, одновременно запускающий JS-программу, поэтому JS выполняется в одном потоке.
  • Существует только один поток JS, выполняющий программу JS на вкладке (процесс рендеринга) в любое время.
• Поток рендеринга GUI и поток движка JS являются взаимоисключающими, и поток движка js блокирует поток рендеринга GUI.
  • То есть время выполнения JS, с которым мы часто сталкиваемся, слишком велико, что приводит к непоследовательности рендеринга страницы, что приводит к блокировке рендеринга и загрузки страницы (то есть медленной загрузке).
  • Например, когда браузер отображаетscriptметка, рендеринг GUI будет остановлен, а затем поток движка js начнет работать и выполнит код js внутри.После выполнения js поток движка js перестанет работать, а графический интерфейс продолжит рендеринг следующее содержание. Поэтому, если время выполнения js слишком велико, это приведет к зависанию страницы.

поток триггера события

• Принадлежит браузеру, а не движку JS, управляет циклом событий и очередью задач.
• Когда выполнение js сталкивается с привязкой события и некоторыми асинхронными операциями (такими как setTimeOut, оно также может поступать из других потоков в ядре браузера, таких как щелчки мыши, асинхронные запросы AJAX и т. д.), оно переходит в поток триггера события и добавляет соответствующее событие в соответствующий поток (например, операции таймера, добавить события таймера в поток таймера), а когда асинхронные события имеют результаты, добавить их операции обратного вызова в очередь событий и дождаться обработки потока js-движка, когда нить простаивает.
• Когда соответствующее событие удовлетворяет условиям срабатывания и срабатывает, поток добавит событие в конец очереди ожидания и будет ждать, пока механизм JS обработает его.
• Поскольку JS является однопоточным, события в этих ожидающих очередях должны быть поставлены в очередь для обработки механизмом JS.

синхронизированный триггерный поток

• setIntervalа такжеsetTimeoutнить
• Счетчик времени браузера не учитывается механизмом JavaScript (поскольку механизм JavaScript является однопоточным, если он находится в состоянии блокировки потока, это повлияет на точность времени)
• Используйте отдельный поток для синхронизации и запуска синхронизации (после завершения синхронизации добавьте его в очередь событий потока триггера событий, подождите, пока JS-движок не будет простаивать и выполнится), этот поток является потоком триггера синхронизации, а также называется потоком таймера
• W3C указывает в стандарте HTML, определяет требованияsetTimeoutВременной интервал ниже 4 мс считается за 4 мс.

Асинхронный поток HTTP-запросов

• После подключения XMLHttpRequest через браузер открывается новый запрос потока.
• При обнаружении изменения состояния, если установлена ​​функция обратного вызова, асинхронный поток сгенерирует событие изменения состояния, а обратный вызов будет помещен в очередь событий, а затем выполнен движком JavaScript.
• Проще говоря, когда выполняется асинхронный запрос HTTP, добавьте событие асинхронного запроса в поток асинхронного запроса, дождитесь ответа (точнее, это должно быть изменение статуса HTTP), а затем добавьте функцию обратного вызова в очередь событий. и дождитесь выполнения потока js engine

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

процесс рендеринга

Блок-схема рендеринга Webkit

Все мы знаем, что процесс рендеринга в разных браузерах немного отличается. Некоторые моменты, которые мы здесь представляем, основаны на Chrome, то есть на Webkit. В конце концов, это мейнстрим. Давайте посмотрим на блок-схему рендеринга Webkit.

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

Разобрать HTML для построения дерева DOM

Рендеринг браузера, тогда браузер должен получить содержимое страницы и сначала должен проанализировать HTML

Нечего сказать, давайте посмотрим непосредственно на диаграмму парсинга HTML (вторжение и удаление сетевого изображения)

Если вы впервые видите эту картинку, вы можете ее не понять, ничего страшного, не торопитесь

Давайте сначала посмотрим на эти основные процессы разбора DOM на рисунке.

Bytes(字节) -> Characters(字符) -> Tokens(词) -> Nodes(节点) -> DOM(DOM树)

Во-первых, инициируйте запрос на получение HTML-контента страницы, который является исходным 0/1.字节流

Затем браузер берет необработанные байты этого HTML и преобразует их в соответствующие字符

Теперь поток байтов становится字符流, который представляет собой набор строк

чтобы поставить字符流разбирает на правильныеDOMструктуру, браузеры продолжат усердно работать

затем продолжайте词法解析изначально анализировать поток персонажа в то, что мы можем понять词, Научное названиеtoken

Эм? Что такое слово (токен)?

词Это наименьшая единица в принципе компиляции, такая как начало тега, атрибут, конец тега, комментарий, узел CDATA.

Tokenбудет определять текущийTokenТип немного сбивает с толку, как сказать, что его легко понять?

<div class="haha">haha</div>

Как и выше, это метка, у которой есть атрибут класса (ерунда), но то, что получает браузер, это просто строка, он не знает, что у метки и какие атрибуты делать, поэтому ее приходится разбирать по крупицам Чтение - это лексический анализ, как его разобрать, например следующее

1. <div					# 哦，看到了<div，这是一个div标签的开始
2. class="haha" # 这是一个class属性
3. >						# 哦，到这儿是一个完整的div开始标签
4. haha					# 嗯，这是一个文本
5. </div>				# 奥，看到了</div>，整个div标签结束了

词法解析Это концепция в принципе компиляции.Вышеупомянутое является чрезвычайно упрощенной версией (чтобы старший брат не умер), просто для удобства всех, чтобы понять

Понятно ли это сейчас?TokensНа этом этапе текущийTokenда开始标签или结束标签или文本Дополнительная информация

Затем мы возвращаемся к своему мышлению, следуем вышеуказанным шагам и испытываем词法解析Разбираем поток символов на слова (Token)

Затем в каждомTokenПосле появления это будет немедленно потребленоTokenСоздание объекта node — это этап Nodes.

Начальный и конечный теги объединяются в пары, атрибуты назначаются, отношения родитель-потомок соединяются и, наконец, формируются.DOMДерево

Последние два шага можно также назвать语法解析, здесьDOM Treeтолько что проанализировано

Еще одно слово,DOM树(DOM Tree) | 文档对象模型, эти вещи говорятDOM树

Разобрать CSS для построения дерева CSSOM

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

с обработкойHTMLполучит то же самоеCSSПравила преобразуются во что-то, что браузер может понять и обработать, а основные шаги повторяются.HTMLпроцесс, но сборка CSS вместо HTML

CSSБайты преобразуются в символы с последующим лексическим анализом и разбором, и, наконец, составляютсяCSS对象模型(CSSOM)древовидная структура

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

такCSSскорость загрузки против сборкиCSSOMСкорость будет влиять на скорость рендеринга первого экрана, это то, что мы часто говоримCSSЗагрузка рендеринга блоков ресурсов

Как оптимизировать? Дерево DOM должно быть небольшим, а CSS следует использовать как можно больше.idа такжеclassМеньше прямого использования тегов 😄

Разбирать JavaScript-скрипты

этот анализJSШаги не фиксированы, потому что при построении DOM-дерева, когдаHTMLПарсер обнаружилscriptПри разметке, то есть при встрече с js, построение DOM-дерева будет сразу заблокировано, а управление переданоJavaScriptдвигатель, подождиJavaScriptПосле запуска движка браузер возобновит построение дерева DOM с того места, где он остановился.

Почему выше сказано,JS будет работать с DOM-узлами, а браузеры не могут предсказать конкретное содержимое будущих DOM-узлов, чтобы предотвратить недопустимые операции и сэкономить ресурсы, он может только заблокировать построение DOM-дерева.

Например, если построение DOM-дерева не заблокировано, если JS удалит DOM-узел A, то ресурсы, потраченные браузером на построение этого узла A, недействительны.

Если файл JS загружается в заголовок HTML, первая отрисовка страницы будет отложена из-за блокировки JS, поэтому для ускорения рендеринга страницы файл JS обычно загружается внизу HTML или JS-файл выполняется.asyncилиdeferнагрузка

• asyncОн выполняется асинхронно. Он будет выполнен после завершения асинхронной загрузки. Порядок выполнения не гарантируется.onloadраньше, но не знаю гдеDOMContentLoadedдо или после события
• deferЭто отложенное выполнение, и похоже, что скрипт находится в браузере.bodyПоследний такой же (хотя по спецификации он должен быть вDOMContentLoadedДо события, а на самом деле эффект оптимизации разных браузеров разный, и может быть и после него)

Построение дерева рендеринга / дерева рендеринга

Render Tree (Дерево рендеринга) byDOM树,CSSOM树слились, но не обязательно ждутDOM树а такжеCSSOM树Запустите сборку слияния после завершения загрузки渲染树, построение трех не имеет предварительных условий и не является полностью независимым, но будет перекрестное и параллельное построение, поэтому оно сформирует рабочий феномен загрузки, синтаксического анализа и рендеринга одновременно.

CSSOM 树а такжеDOM 树объединены в дерево рендеринга,渲染树Содержит только узлы, необходимые для рендеринга веб-страницы, затем используются для расчета макета каждого видимого элемента и вывода в процесс рисования для рендеринга пикселей на экране.

Как показано выше (вторжение и удаление сетевой карты), чтобы построить дерево рендеринга, давайте посмотрим, что сделал браузер.

• Браузер сначала просматривает каждый видимый узел, начиная с корня дерева DOM.
  • Некоторые узлы, такие как теги сценария, метатеги и т. д., не видны и будут игнорироваться, поскольку они не будут отражены в отображаемом выводе.
  • Некоторые узлы скрыты с помощью CSS, поэтому они также игнорируются в дереве рендеринга, например, на изображении выше.spanЭтикетка имеетdisplay: noneатрибут, который также игнорируется
• Для каждого видимого узла найдите соответствующие правила CSSOM и примените их.
• Выходные видимые узлы вместе с его содержимым и расчетами

Макет

渲染树В то же время он содержит весь видимый контент на экране и информацию о его стиле.С деревом рендеринга пора перейти к этапу макета.На данный момент мы вычислили, какие узлы должны быть видны и их стили расчета.Но мы не учитывали их в устройствеОбласть просмотравнутри точного местоположения и размера, это布局( Макет ) этап, также известный как自动重排или回流 ( Reflow )

Этот этап обычно означает, что содержимое, структура, положение или размер элемента изменились, что требует пересчета стилей и деревьев рендеринга.

В качестве простого примера рассмотрим следующий код

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>hahaha</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world</div>
    </div>
  </body>
</html>

Тело веб-страницы с приведенным выше кодом содержит два вложенных элемента div: первый родительский элемент имеет размер отображения узла, равный 50 % ширины окна просмотра, а второй элемент, содержащийся в родительском элементе, имеет ширину, установленную на 50 % от ширины области просмотра. ширина его родителя, то есть 25% ширины области просмотра (чистое вторжение и удаление карты)

Результатом процесса компоновки является盒模型, который точно фиксирует точное положение и размер каждого элемента в окне просмотра, конечно, все относительные измерения преобразуются в абсолютные пиксели на экране.

Давайте сначала посмотрим вниз, а мы познакомим вас с ним позже

Картина

Пройдя все вышеперечисленные шаги, мы, наконец, пришли к绘制, на этом этапе вы можете подумать о его роли, услышав имя.

После первых нескольких шагов мы знаем, какие узлы видимы, их вычислительные стили и геометрическую информацию, мы передаем эту информацию на последний этап, чтобы преобразовать каждый узел в дереве рендеринга в фактический пиксель на экране, обычно известный как绘制или栅格化

绘制В процессе происходит рисование под названием重绘, что мы скажем далее

Перекрасить

Когда изменение элемента влияет только на внешний вид элемента (например, цвет фона, цвет границы, цвет текста и т. д.), вам нужно только применить новый стиль для рисования элемента, который называется重绘 ( Repaint )

Перекомпоновать

Мы сказали выше回流, конечно, также называется重排,Знать,回流должны сопровождаться重绘,重绘Однако он может появиться один.В сравнении очевидно, что стоимость рефлоу выше, чем у перерисовки, а рефлоу ноды часто приводит к рефлоу поднод и одноранговых нод, поэтому схема оптимизации обычно включает это, постарайтесь избежать этого.回流

что вызывает рефлюкс

• инициализация рендеринга страницы

• Изменения структуры DOM, такие как удаление узла

• Изменения дерева рендеринга, такие как уменьшение отступов

• окноresize

• Некоторые атрибуты JS вызывают перекомпоновку.Многие браузеры оптимизируют перекомпоновку и выполняют пакетную перекомпоновку, когда их достаточно. но кромеrender树Прямое изменение , при получении некоторых свойств, браузер также вызовет перекомпоновку, чтобы получить правильное значение, что делает оптимизацию браузера недействительной.

• offset ( Top/Left/Width/Height )

  • scroll ( Top/Left/Width/Height )
  • cilent ( Top/Left/Width/Height )
  • width, height
  • называетсяgetComputedStyle()или IEcurrentStyle

Как уменьшить и избежать перерисовки оплавлением

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

• Сокращайте изменения стилей по пунктам, желательно все сразу.styleили определить стиль какclassи обновить сразу
• Избегайте циклических манипуляций с DOM и переводите DOM в автономный режим перед изменением.
  • СоздаватьdocumentFragment, примените к нему все манипуляции с DOM и, наконец, добавьте его вwindow.document
  • Сначала поместите узел DOMdisplay:none(сработает один разreflow), а затем внесите изменения и снова отобразите его.
  • Клонируйте узел DOM в памяти, измените его и замените живым узлом.
• Избегайте многократного чтения таких атрибутов, как смещение, и кэшируйте их в переменные, если их нельзя избежать.
• Абсолютно или фиксированно размещайте сложные элементы так, чтобы они не вписывались в поток документа, иначе перекомпоновки будут дорогими.
• Изменение размера шрифта также может вызвать перекомпоновку, поэтому постарайтесь свести это к минимуму, насколько это возможно.
• Макет таблицы, небольшое изменение приведет к изменению макета всей таблицы, поэтому лучше использовать меньше

Вкратце, в конце концов, перерисовка с перерисовкой, особенно перерисовка, очень ресурсоемка, и лучше ее по возможности избегать.Что касается перерисовки с перерисовкой, вызванной некоторыми свойствами CSS, вы можете зайти на этот сайт, чтобы проверить.csstriggers.com/

Композитный

Наконец дошел до последней точки合成, давайте сначала подведем итог вышеперечисленным шагам, до сих пор мы испытывали процесс рендеринга следующим образом.

• Разобрать сначалаHTMLдокументы, формирующие DOM-дерево
• Затем проанализируйтеCSS, который создает дерево CSSOM
• В процессе анализа деревьев DOM и CSSOM, если встречается JS, построение дерева DOM будет немедленно заблокировано, разбор JS завершен, а затем выполняются два вышеуказанных шага.
• Далее браузер строит дерево рендеринга (дерево рендеринга) через деревья DOM и CSSOM.
  • Во время этого процесса элементы тега, которые не видны в DOM, не будут помещены в дерево рендеринга, как и<head></head> 或 display:none
  • Правила дерева CSSOM привязаны к каждому элементу дерева рендеринга.
• После построения дерева рендеринга браузер позиционирует и размещает эти элементы.Этот шаг также называется перекомпоновкой/перекомпоновкой (Reflow) или макет (Layout )
• Далее рисуем стили, цвета, фоны, размеры и границы этих элементов.Этот шаг также называется перекрашиванием (Repaint)
• Далее наш последний шаг синтеза (composite), браузер будет отправлять информацию о каждом слое на GPU, а GPU будет синтезировать каждый слой и отображать его на экране

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

Во-первых, нам нужно кратко понять некоторые основные понятия

рендеринг в браузере

Когда браузер отображает графику, существует контекст рисования, а контекст рисования делится на два типа.

• Первый — это контекст, используемый для рисования 2D-графики, называемый контекстом 2D-рисования (GraphicsContext).
• Второй — это контекст для рисования 3D-графики, называемый контекстом 3D-рисования (GraphicsContext3D).

Также существует три метода рендеринга веб-страниц.

• Программный рендеринг (память ЦП)
• Композитный рендеринг с использованием программного рисования (память графического процессора) CSS3D, WebGL
• Композитный рендеринг с аппаратным ускорением (память графического процессора)

Конечно, нам не нужно глубоко разбираться в них, достаточно знать их существование.

технология программного рендеринга

Webkit не требует контента с аппаратным ускорением (включая, помимо прочего,CSS3 3D变形,CSS3 3D变换,WebGLа также视频), его можно использовать软件渲染技术завершить рисунок страницы

Выше мы видели технологию программного рендеринга, что это такое? Давайте посмотрим

Для каждого объекта рендеринга требуется три этапа, чтобы отрисовать самого себя.

• Первый этап — отрисовка фона и границ всех блоков в этом слое.
• Второй этап — отрисовка плавающего контента.
• Третий этап — передний план (Foreground), то есть содержательная часть, контур, цвет шрифта, размер и т. д. (на этом этапе происходит фон, граница и т. д. встроенных элементов)

технология аппаратного ускорения

Технология аппаратного ускорения относится к использованию аппаратных возможностей графического процессора для помощи в отображении веб-страниц (роль графического процессора в основном заключается в рисовании 3D-графики, и производительность очень хорошая).

Нормальные и составные слои

Слои, отображаемые браузером, обычно включают две категории:普通图层так же как复合图层

Обычный документооборот можно понимать как составной слой, который мы называем默认复合层, потому что независимо от того, сколько элементов добавлено, они фактически находятся в одном и том же составном слое.absoluteмакет,fixedКроме того, несмотря на то, что можно отклониться от обычного документооборота, он по-прежнему принадлежит默认复合层

Составные слои могут быть независимыми от обычного документооборота.После модификации вся страница может быть перерисована целиком и производительность может быть улучшена.Однако не используйте составные слои в большом количестве.В противном случае из-за чрезмерного потребления ресурсов страница станет больше застрял Большой

В графическом процессоре каждый композитный слой рисуется отдельно, поэтому не влияет друг на друга.硬件加速образом, объявит新的复合图层, она будет выделять ресурсы отдельно, и естественно будет отделена от обычного документооборота, так что какие бы изменения в этом составном слое не коснулись默认复合层Перерисовка

Что такое композитный слой/аппаратное ускорение

Составные слои или аппаратное ускорение на самом деле просто запускают синтез.composite, то должны выполняться следующие три условия

• Не влияет на документооборот
• Не зависит от документооборота
• не вызывает перекраску

Если подумать, на самом деле не так много случаев, когда это можно сделать (Chrome)

• Самый распространенный способ -transform
• opacityАнимация атрибутов/переходов (композитный слой не будет создан, пока анимация не будет выполнена, элемент вернется в предыдущее состояние после того, как анимация не начнется или не закончится)
• will-changАтрибут (это относительно удаленно), обычно сотрудничаютopacityа такжеtranslateИспользуйте, в дополнение к вышеуказанным атрибутам, которые могут запускать аппаратное ускорение, другие атрибуты не станут составными слоями.Функция состоит в том, чтобы сообщить браузеру об изменении заранее, чтобы браузер начал выполнять некоторую работу по оптимизации (лучше всего отпустите его после использования)
• <canvas> <webgl>и т.д. элементы
• и предыдущийflashплагины и т.д.

С точки зрения непрофессионала, если мы добавим элемент вtransformатрибут, то элемент не повлияет и не будет зависеть от документооборота, а также не вызовет перерисовки, он станет составным слоем, а это значит, что мы используем легендарный硬件加速技术

абсолютный?

В этот момент все могут быть немного сбиты с толку, мы не часто говоримabsoluteЭто вне документооборота?Почему выше нет композитного слоя или аппаратного ускорения?absoluteШерстяная ткань

фактически,absoluteХотя можно оторваться от обычного потока документа, оторваться от составного слоя по умолчанию, как егоleftАтрибуты могут использовать процент значений в зависимости от егоoffset parent

Таким образом, даже еслиabsoluteИнформация в обычном документообороте не меняется при изменении информации渲染树, но когда браузер наконец отрисовывает, отрисовывается весь композитный слой, поэтомуabsoluteЕсли информация в составном слое изменится, это по-прежнему повлияет на отрисовку всего составного слоя, и браузер все равно перерисует его.Если в составном слое много содержимого,absoluteРезультирующая информация о чертеже меняется слишком сильно, и потребление ресурсов также очень серьезно.

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

оптимизация рендеринга страницы

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

• Структура HTML-документа имеет как можно меньше уровней, желательно не глубже шести уровней.

• JS-скрипты нужно размещать как можно позже

• Иерархия структуры стилей максимально проста.

• Небольшое количество стилей верхней части страницы помещается в теги.

• Сведите к минимуму манипуляции с DOM в сценариях, попытайтесь получить доступ к информации о стиле DOM в автономном режиме и избегайте чрезмерного запуска перекомпоновки.

• Уменьшите количество модификаций стилей элементов с помощью кода JS и максимально используйте модификации.classНазовите стиль операции или анимацию

• Сведите к минимуму переформатирование и перерисовку браузера

• Это 2020 год! просто не используйtableвыложенный

• Используйте только анимацию CSStransformа такжеopacity, перекомпоновки и перерисовки не произойдет

• Скрыть за пределами экрана или попытаться остановить анимацию при прокрутке страницы

• Используйте только CSS для анимации, насколько это возможно, анимация CSS определенно намного лучше, чем анимация JS.

• Избегайте неявного синтеза в браузере

• Изменить размер составного слоя

наконец

Вышеизложенное немного случайно. Наконец, давайте подытожим официальную точку зрения.

Инициируем запрос, мы получаем страницу, и загруженная страница будет передана ядру браузера (процесс рендеринга) для обработки

• Во-первых, соответствующий метод синтаксического анализа выполняется в соответствии с типом DTD, определенным наверху.
• Процесс рендеринга является многопоточным, и синтаксический анализ веб-страницы будет передан для обработки внутреннему потоку рендеринга графического интерфейса.
• Интерпретатор HTML в потоке рендеринга, который интерпретирует HTML-страницы и ресурсы из потоков байтов в потоки символов.
• Затем поток символов интерпретируется в слова лексическим анализатором.
• После этого синтаксический анализатор строится в узлы по словам, и, наконец, через эти узлы формируется DOM-дерево.
• Во время этого процесса, если обнаруженный узел DOM является кодом JS, он будет вызыватьсяJS引擎Интерпретируйте и выполните код JS, в настоящее времяJS引擎а такжеGUI渲染线程взаимное исключение,GUI渲染线程Он будет приостановлен, и процесс рендеринга остановится.Если дерево DOM будет изменено во время выполнения кода JS, построение DOM необходимо начать заново.
• Если узел должен зависеть от других ресурсов, изображений/CSS и т. д., для их загрузки будет вызван загрузчик ресурсов сетевого модуля, они асинхронны и не будут блокировать построение текущего дерева DOM.
• Если вы столкнулись с URL-адресом ресурса JS (не помеченным как асинхронный), вам необходимо остановить текущее построение DOM до тех пор, пока ресурс JS не будет загружен иJS引擎Продолжить создание DOM после выполнения
• Для CSS интерпретатор CSS интерпретирует файл CSS во внутреннюю структуру представления и создает дерево правил CSS.
• Затем объедините дерево правил CSS и дерево DOM, чтобы сгенерировать дерево рендеринга, также называемое деревом рендеринга.
• Наконец, дерево рендеринга компонуется и рисуется, а результат передается в процесс управления браузером через поток ввода-вывода для отображения.

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

В следующей статье «Вопрос для интервью» введите URL-адрес, чтобы отобразить исчерпывающий обзор-резюме, продолжение следует. .

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

Да, и еще, вы можете добавить друга и присоединиться к группе, чтобы общаться с вами.Также приглашаем подписаться на публичный аккаунт [Irregular Front End] 😄

Ссылка (я ссылался на многие статьи, и я разместил три, которые я считаю лучшими. Всем рекомендую взглянуть)

1. Процесс от ввода URL до загрузки страницы? Как улучшить систему знаний о фронтенде с помощью одного вопроса

2. От многопроцессорности браузера до однопоточности JS — наиболее полное сочетание операционного механизма JS.

3. Статья о парсинге браузера и оптимизации анимации CSS (GPU)