Коды «Как работает браузер» для подружек — процесс рендеринга (1,1 Вт слов)

предисловие

Если вы хотите стать квалифицированным фронтенд-инженером, необходимо освоить принципы работы соответствующих браузеров, чтобы у вас была полная система знаний."Если вы можете понять принцип работы браузера, вы можете решить 80% проблем с интерфейсом.".

"Другие статьи:"

❝

• (Рекомендуется интенсивное чтение) Отправьте вам 54 вопроса для собеседования по JavaScript
• 9 основных операций связанного списка "алгоритмы и структуры данных"
• [Галантные товары👍] От детальной работы массива js до анализа array.js в v8
• [Полная искренность👍] Советы по отладке Chrome DevTools, эффективность➡️🚀🚀🚀
• [Предложение👍] Продолжайте с 100 ответными вопросами JS, кислыми и крутыми (всего 1,8 Вт слов + консолидация основы JS)
• [1.2W word👍] Читы на девушку - как работает браузер (Часть 1)

❞

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

❝

Снова,"Знание того, как работает браузер, позволит вам понять интерфейс в более высоком измерении."

❞

❝

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

❞

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

"Прочитав этот выпуск, вы получите"

• Базовая логика оптимизации производительности интерфейса;
• Основной процесс рендеринга страницы браузера
• Анализ времени выполнения JavaScript
• Браузерная сеть и анализ механизма безопасности

Whisper: Вы можете поделиться со мной своими мыслями в области сообщений, а также можете записать свой мыслительный процесс в области сообщений 👊

---

"Если вам это нравится, вы можете лайкнуть / подписаться и поддержать его.Я надеюсь, что вы можете прочитать эту статью и получить что-то."

Пересмотрите последний выпуск

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

Предыдущая статья:[1.2W word👍] Читы на девушку - как работает браузер (Часть 1)

Архитектура браузера (на основе Chrome)

В основном суммируйте следующие точки знаний:

• Разберитесь с понятиями однопоточного и многопоточного,разница между процессом и потоком
• Сосредоточение внимания на браузере Chrome, анализ истории развития браузера Chrome, от браузера с одним процессом до браузера с несколькими процессами.
• Тенденция от однопроцессной архитектуры к многопроцессной, преимущества и недостатки тенденций развития
• Большинство браузеров теперь имеют многопроцессорную архитектуру:Основной процесс Процесс рендеринга Процесс плагина Процесс графического процессора Сетевой процесс

HTTP-запрос

В основном суммируйте следующие точки знаний:

• Общий процесс запроса Http примерно делится навосемь этапов

• Эти восемь этапов суммированы следующим образом: Создание запроса Поиск в кеше Подготовка IP-адреса и порта Ожидание очереди TCP Установка TCP-соединения Создание HTTP-запроса Сервер обрабатывает запрос Сервер возвращает запрос и отключается

• Разобран общий принцип работы каждого этапа

• Кэш браузера упоминается в части оптимизации производительности (общий тест интервью).

Процесс навигации: введите URL-адрес для отображения страницы

Основные пункты знаний:

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

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

Итак, у нас есть то, с чем нам нужно разобраться дальше, как работает процесс рендеринга?

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

Первые концепции для понимания:

• Механизм рендеринга: основной частью браузера является «движок рендеринга», но мы обычно называем его «ядром браузера».

• Основные потоки механизма рендеринга включают в себя:

• Основные обязанности каждого потока

  • Поток рендеринга GUI: поток рендеринга GUI отвечает за рендеринг интерфейса браузера, синтаксический анализ HTML, CSS, построение дерева DOM и дерева RenderObject, компоновку и рисование и т. д. Когда интерфейс необходимо перерисовать (Repaint) или вызвать перекомпоновку (Reflow) в результате какой-либо операции, этот поток будет выполняться.
  • Поток движка JavaScript. Поток движка JavaScript в основном отвечает за синтаксический анализ скриптов JavaScript и выполнение соответствующего кода. Движок JavaScript имеет только один поток JavaScript, запускающий программу JavaScript в любой момент времени на вкладке (процесс Renderer). Следует отметить, что поток GUI и поток движка JavaScript являются взаимоисключающими, поэтому время работы JavaScript слишком велико, что приведет к непоследовательному отображению страницы и вызовет блокировку страницы.
  • Поток триггера события: когда событие инициируется, поток добавит событие в конец очереди ожидания, ожидая, пока механизм JavaScript обработает его. Обычно движки JavaScript являются однопоточными, поэтому эти события ставятся в очередь для выполнения JS.
  • Триггер таймера: setInterval и setTimeout, которые мы используем каждый день, находятся в этом потоке.Причина может быть: поскольку JS-движок является однопоточным, если он находится в состоянии заблокированного потока, это повлияет на точность тайминга, поэтому ему нужно должно быть выполнено через отдельный поток.Событие, которое синхронизировало и инициировало ответ, имело бы больше смысла.
  • Поток запроса Http: после подключения XMLHttpRequest через браузер открывается новый запрос потока. Этот поток является потоком запроса Http. Когда он обнаруживает изменение состояния, если установлена ​​функция обратного вызова, асинхронный поток генерирует событие изменения состояния. и поместить его в JavaScript Ожидание обработки в очереди обработки движка.

---

Вышеизложенное взято из резюме Baoge:Веб-работники, которых вы не знаете (Часть 1) [7,8 тыс. слов | Предупреждение о нескольких изображениях]

С учетом приведенных выше концепций нам будет полезно поговорить о конвейере рендеринга.

Упрощенный механизм рендеринга

Я уже давно закончил читать принцип работы браузера.Прочитал много блогов и статей.На тот момент просто разбирал какой-то контент,как показано ниже👇

Упрощенный механизм рендеринга обычно делится на следующие этапы.

1. Обработайте HTML и постройте DOM-дерево.
2. Обработка CSS для построения дерева CSSOM.
3. Объедините DOM и CSSOM в единое дерево рендеринга.
4. Макет в соответствии с деревом рендеринга и вычисление положения каждого узла.
5. Вызовите графический процессор, чтобы нарисовать, скомпоновать слой и отобразить его на экране.

Дальнейшее, вероятно, выглядит так:

При построении дерева CSSOM рендеринг блокируется до тех пор, пока дерево CSSOM не будет построено. А построение дерева CSSOM — это очень требовательный к производительности процесс, поэтому вы должны стараться, чтобы иерархия была как можно более плоской, чтобы уменьшить чрезмерное каскадирование.Чем конкретнее селекторы CSS, тем медленнее будет скорость выполнения.

Когда HTML преобразуется в тег script, построение DOM будет приостановлено, а затем перезапущено с того места, где оно было остановлено. То есть, если вы хотите быстрее выполнять рендеринг в верхней части сгиба, вам не следует загружать JS-файлы в верхней части сгиба. И CSS также повлияет на выполнение JS.JS будет выполняться только при разборе таблицы стилей, так что также можно считать, что в этом случае CSS также приостановит построение DOM.

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

Разница между Load и DOMContentLoaded

Событие Load срабатывает, чтобы указать, что DOM, CSS, JS и изображения на странице загружены.

Событие DOMContentLoaded запускается, чтобы указать, что исходный HTML-код полностью загружен и проанализирован, не дожидаясь загрузки CSS, JS и изображений.

слой

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

Новые слои могут быть созданы с помощью следующих общих свойств

• 3D-преобразование:translate3d,translateZ
• will-change
• video,iframeЭтикетка
• достигается за счет анимацииopacityанимация перехода
• position: fixed

Перекрасить и переплавить

Перерисовка и перекомпоновка — небольшая часть этапа рендеринга, но эти два этапа оказывают большое влияние на производительность.

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

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

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

• изменить размер окна
• изменить шрифт
• Добавить или удалить стили
• изменение текста
• положение или поплавок
• коробочная модель

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

1. Когда цикл событий завершит выполнение микрозадач, он определит, нужно ли обновлять документ. Поскольку браузер имеет частоту обновления 60 Гц, он обновляется только каждые 16 мс.
2. а затем определить, является лиresizeилиscroll, если есть, это вызовет событие, поэтомуresizeиscrollСобытие также запускается один раз не менее 16 мс и имеет собственную функцию регулирования.
3. Определить, запущен ли медиа-запрос
4. Обновить анимацию и отправить событие
5. Определить, есть ли событие полноэкранного режима
6. воплощать в жизньrequestAnimationFrameПерезвони
7. воплощать в жизньIntersectionObserverОбратный вызов, этот метод используется для определения того, виден ли элемент, его можно использовать для ленивой загрузки, но совместимость плохая
8. обновить интерфейс
9. Это то, что можно сделать в одном кадре. Если в кадре есть свободное время, он выполнитrequestIdleCallbackПерезвони.

Вышеприведенный контент взят изHTML-документ

Уменьшите количество перерисовок и перекомпоновок

• использоватьtranslateальтернативаtop

  <div class="test"></div>
  <style>
  	.test {
  		position: absolute;
  		top: 10px;
  		width: 100px;
  		height: 100px;
  		background: red;
  	}
  </style>
  <script>
  	setTimeout(() => {
          // 引起回流
  		document.querySelector('.test').style.top = '100px'
  	}, 1000)
  </script>
  

• использоватьvisibilityзаменятьdisplay: none, потому что первое приведет только к перерисовке, второе вызовет перекомпоновку (изменение макета)

• Измените DOM после автономного режима, например: сначала отдайте DOMdisplay:none(с перекомпоновкой), затем вы изменяете его 100 раз, прежде чем показывать

• Не помещайте значение свойства узла DOM в цикл как переменную в цикле.

  for(let i = 0; i < 1000; i++) {
      // 获取 offsetTop 会导致回流，因为需要去获取正确的值
      console.log(document.querySelector('.test').style.offsetTop)
  }
  

• Не используйте макет таблицы, небольшое изменение может привести к перестановке всей таблицы.

• Выбор скорости реализации анимации, чем быстрее скорость анимации, тем больше время перекомпоновки, вы также можете использоватьrequestAnimationFrame

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

• Превратите часто выполняемые анимации в слои, которые предотвратят перекомпоновку узла и влияние на другие элементы. например, дляvideoтег, браузер автоматически превратит узел в слой.

---

Это не то, что я хочу дразнить

Вышеупомянутый процесс рендеринга — это содержание, которое существовало в моих заметках год назад. Я до сих пор помню, что способ обучения в то время заключался в том, чтобы глотать даты. Вышеприведенный ☝сокращенный процесс рендеринга, я помню, что читал его в блоге на GitHub., Я скопировал его прямо в то время. В то время я чувствовал, что в этом принципе рендеринга есть вывод, в котором разобрались другие. Проверьте его сами, и вы его запомните.На самом деле, во время интервью, когда я упомянул эту часть, глубины явно не хватило, и меня, естественно, спросили.

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

Позвольте мне взять вас 🚗 для обзора общего процесса рендеринга.

---

Подробный механизм рендеринга

Дополнительные технические термины можно свести к следующим этапам:

1. Построить DOM-дерево
2. расчет стиля
3. этап макета
4. Слоистый
5. рисовать
6. Блокировать
7. Растеризация
8. синтез

---

Вы можете себе представить, что от 0,1 байтового потока до последней страницы, отображаемой перед вами, механизм рендеринга здесь должен быть очень сложным, поэтому модуль рендеринга делит процесс выполнения на множество подэтапов, а движок рендеринга получает слова из сетевого процесса.После дросселирования данных, после обработки этих подэтапов, пиксели окончательно выводятся.Этот процесс можно назвать как渲染流水线, посмотрим по картинке👇

Далее разберем общий процесс с каждого этапа.

Построить DOM-дерево

Основная задача этого процесса — преобразовать содержимое HTML в древовидную структуру DOM браузера.

• Байт → Символ → Токен → Узел → Объектная модель (DOM)

Объектная модель документа (DOM)

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

Давайте сначала посмотрим, как преобразуются данные👇

Примерный процесс:

1. **Преобразование.** Браузер считывает необработанные байты HTML с диска или из сети и преобразует их в отдельные символы в соответствии с указанной кодировкой файла (например, UTF-8).
2. **Токенизация:** Браузер преобразует строку вСтандарт W3C HTML5Указывает различные токены, например "", "" и другие строки в угловых скобках. Каждый токен имеет особое значение и набор правил.
3. **Лексический анализ**. Выпущенные токены преобразуются в «объекты», определяющие их свойства и правила.
4. **Конструкция DOM**. Наконец, поскольку HTML-теги определяют отношения между различными тегами (некоторые теги содержатся внутри других тегов), созданные объекты связаны внутри древовидной структуры данных, которая также фиксирует отношения «родитель-потомок»:HTMLобъектbodyродитель объекта,bodyдаparagraphРодитель объекта и так далее.

Мы называем описанный выше процесс процессом построения DOM-дерева.

расчет стиля

На этом подэтапе есть три основных шага

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

форматирование таблицы стилей

Мы получаем 0,1-байтовые потоковые данные, которые браузер не может распознать напрямую, поэтому после того, как механизм рендеринга получит текстовые данные CSS, он выполнит операцию по преобразованию их в структуру, понятную браузеру —styleSheets

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

Через консоль браузераdocument.styleSheetsПроверьте окончательный результат.Функции запроса и модификации могут быть выполнены с помощью JavaScript,Другими словами, этот этап обеспечивает краеугольный камень для последующих операций над стилем.

Стандартизированные таблицы стилей

Что такое стандартизированная таблица стилей? Сначала взгляните на фрагмент текста CSS👇

body { font-size: 2em }
p {color:blue;}
span  {display: none}
div {font-weight: bold}
div  p {color:green;}
div {color:red; }

Иногда, когда мы пишем стили CSS, мы пишемfont-size:2em;color:red;font-weight:bold, такие значения нелегко понять механизмам рендеринга, поэтому их необходимо нормализовать перед вычислением стилей, например.em->px,red->rgba(255,0,0,0),bold->700и Т. Д.

Как выглядит значение атрибута после стандартизации приведенного выше кода?

Рассчитать конкретный стиль каждого узла DOM

пройти через格式化и标准化, следующим шагом является вычисление конкретной информации о стиле для каждого узла.

Правила расчета:继承и层叠

继承: каждый дочерний узел по умолчанию наследует стиль родительского узла. Если он не найден в родительском узле, будет использоваться стиль браузера по умолчанию, также называемыйUserAgent样式.

层叠: каскадирование стилей, фундаментальная функция CSS, определяющая алгоритм объединения значений свойств из нескольких источников. В каком-то смысле он занимает центральное место, а конкретные каскадные правила относятся к категории углубленного языка CSS, который будет здесь объяснен.

Однако стоит отметить, что после расчета стиля все значения стиля будут привязаны кwindow.getComputedStyleсреди них, то есть можетПолучить рассчитанный стиль через JS,Очень удобно.

На этом этапе конкретный стиль каждого элемента в узле DOM завершен, и процесс расчета должен следовать CSS.继承и层叠Два правила, окончательный выходной контент — это стиль DOM каждого узла, который сохраняется в ComputedStyle.

Чтобы узнать окончательный стиль расчета каждого элемента DOM, вы можете открыть «Инструменты разработчика» Chrome, выбрать первый тег «элемент», например, я выбрал тег div ниже, а затем выберите вложенный тег «Вычисленный», как показано ниже показано:

Другой способ сказать CSSOM

Если вы не очень хорошо это понимаете, вы можете прочитать это здесь👇

Как и в случае с HTML, нам нужны еще два правила CSS:继承и层叠Преобразуйте его во что-то, что браузер сможет понять и обработать.Процесс обработки аналогичен обработке HTML, как показано выше☝

Байты CSS преобразуются в символы, затем в токены и узлы и, наконец, связываются в древовидную структуру, называемую объектной моделью CSS (CSSOM)👇

Многие люди должны быть знакомы с этим. Действительно, многие блоги основаны на CSSOM. Я хочу сказать следующее:

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

Во многих статьях говорится, что дерево рендеринга тоже 16-летней давности.Сейчас, после рефакторинга кода, мы можем рассматривать LayoutTree как дерево рендеринга, но некоторые различия между ними все же есть.

Создать дерево компоновки

Вышеупомянутый процесс завершил построение дерева DOM (дерево DOM) и расчет стиля (стиль DOM), следующим шагом является определение через систему макета браузера.положение элемента, то есть для формирования дерева компоновки (Layout Tree), которое вызывается передвизуализировать дерево.

Создайте дерево компоновки

1. Элементы, которые не видны в дереве DOM, элементы head, метаэлементы и т. д., а также элементы, использующие атрибут display:none, не будут отображаться в дереве макета в конце, поэтомуСистеме компоновки браузера необходимо дополнительно построить дерево компоновки, содержащее только видимые элементы.

2. Рассмотрим процесс построения дерева раскладок непосредственно в сочетании со схемой:

   ​

   

   Чтобы построить дерево компоновки, система компоновки браузера обычно делает следующее:

• Пройдитесь по видимым узлам дерева DOM и добавьте их в дерево компоновки.
• Для невидимых узлов игнорируются заголовок, метатеги и т. д. Атрибут элемента body.p.span содержит display:none, поэтому этот элемент не включается в дерево макета.

расчет макета

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

• Посмотрите, как макет макета браузера из исходного кода Chrome
• Статья Renren FED Team — Как устроен браузер из исходного кода Chrome

Разобраться с первыми тремя этапами

Диаграмма, обобщающая вышеперечисленные три этапа

Слоистый

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

Первое, что вам нужно знать, это то, что браузер строит布局树После этого необходимо выполнить ряд операций, которые могут учитывать некоторые сложные сценарии, такие как некоторые сложные 3D-преобразования, прокрутка страницы или сортировка по оси z с использованием z-индексации и т. д., а также способы управления контекст стека. Показать и скрыть и т. д.

Создать дерево слоев

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

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

Давайте посмотрим на взаимосвязь между слоем и деревом компоновки, как показано ниже👇

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

При каких обстоятельствах механизм рендеринга создает новый слой для определенного узла?

Есть два случая, которые необходимо обсудить отдельно, один из нихЯвный синтез, одинНеявный синтез.

Явный синтез

1. Владениеконтекст стекаузел.

Контекст стека в основном создается с некоторыми специфическими свойствами CSS, как правило, в следующих случаях:

1. Сам корневой элемент HTML имеет контекст стека.
2. Общие настройки элементаположение не статичноиСвойство z-index установлено, который создает контекст стека.
3. элементальopacityзначение не 1
4. элементальtransformзначение не равно
5. элементальfilterзначение не равно
6. элементальisolationзначение изолировано
7. will-changeУказанное значение свойства является любым из указанных выше. (Роль воли-изменения будет подробно описана позже)

2. Потребностьпортной(клип).

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

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

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

Неявный синтез

Что это за ситуация?z-indexНижние узлы продвигаются к отдельному уровню маршрута, затем层叠等级比它高узелмегаполисстановится отдельным слоем.

Краткое описание процесса рендеринга в браузере и Composite (объединение слоев рендеринга)

недостаток:Согласно приведенной выше статье, в большом проектеz-indexПосле того, как нижний узел будет переведен в отдельный слой, все элементы, расположенные на нем, будут перемещены в отдельный слой.Мы знаем, что тысячи слоев увеличивают нагрузку на память и иногда приводят к сбою страницы. Это层爆炸

рисовать

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

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

Вы можете развернуть его на панели настроек в Chrome Developer Tools.more tools, затем выберитеLayersпанель, вы можете увидеть следующий список чертежей:

На этом рисунке область, на которую указывает стрелка 2, представляет собой список рисования документа, а индикатор выполнения в области перетаскивания, на которую указывает стрелка 3, может воспроизводить процесс рисования списка.

Конечно, операция отрисовки слоев имеет особый поток в процессе рендеринга, который называется потоком композиции.

Блокировать

• Далее мы приступим к операции рисования.На самом деле, операция рисования в процессе рендеринга завершается специальным потоком.Называется этот потоксинтетическая нить.

• После того, как список отрисовки будет готов, основной поток процесса рендеринга даст合成线程Отправитьcommitсообщение для отправки списка рисунков в поток компоновки. Затем пришло время синтетической нити показать общую картину.

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

• По вышеуказанным причинам поток композитинга разделит слой на тайлы.
• Размер этих блоков вообще не очень большой, обычно 256*256 или 512*512. Это может значительно ускорить отображение страницы в верхней части сгиба.

Под ускорением рендеринга первого экрана можно понимать следующее:

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

Растеризация

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

• Тайл — это наименьшая единица, в которой выполняется растеризация.
• Специально поддерживаемый в процессе рендерингаРастеризованный пул потоков, который отвечает заплиткапреобразовать врастровые данные
• Композитный поток выбирает объекты рядом с окном просмотракафельная плитка, дай этоРастеризованный пул потоковгенерировать растровое изображение
• Процесс генерации растровых изображений фактически ускоряется графическим процессором, и сгенерированные растровые изображения, наконец, отправляются в合成线程

Это работает следующим образом👇

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

Я думаю, вы все еще помните, что операции графического процессора выполняются в процессе графического процессора.Если операция растеризации использует графический процессор, то окончательная операция генерации растрового изображения выполняется в графическом процессоре, что включает в себя операции между процессами. Для конкретной формы вы можете обратиться к следующему рисунку:

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

композиция и экспозиция

После завершения операции растеризациисинтетическая нитьКоманда рисования «DrawQuad» генерируется и отправляется в процесс браузера.

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

Прочитал объяснение блогера по принципу вывода изображения на монитор:

Будь то монитор ПК или экран мобильного телефона, существует фиксированная частота обновления, как правило, 60 Гц, то есть 60 кадров, то есть 60 изображений обновляются за одну секунду, а время, в течение которого изображение остается, составляет около 16,7 мс. И каждый раз обновляется картинка с видеокартыпередний буфер. После того, как видеокарта получит страницу от процесса браузера, она синтезирует соответствующее изображение и сохранит изображение взадний буфер, то система автоматически前缓冲区и后缓冲区Поменяйтесь местами и так далее.

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

---

Подведите итог картинке 👇

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

reflow-перерисовать-композит

Три способа обновить представление

• переплавка
• перерисовать
• синтез

переплавка

Другое название — перестановка, а условия срабатывания триггера перекомпоновки таковы:Когда изменения в структуре DOM вызывают изменения в геометрии DOM,случится回流процесс.

В частности, следующие операции вызовут перекомпоновку:

1. Геометрические свойства элемента DOM изменяются, общие геометрические свойстваwidth,height,padding,margin,left,top,borderПодождите, это очень понятно.
2. сделать узлы DOM доступными增减или移动.
3. прочти и напишиoffsetклан,scrollсемья иclientКогда используется атрибут семейства, браузеру необходимо выполнить операцию перекомпоновки, чтобы получить эти значения.
4. перечислитьwindow.getComputedStyleметод.

Некоторые общие свойства и методы, которые могут вызвать перекомпоновку:

• clientWidth,clientHeight,clientTop,clientLeft
• offsetWidth,offsetHeight,offsetTop,offsetLeft
• scrollWidth,scrollHeight,scrollTop,scrollLeft
• scrollIntoView(),scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

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

перерисовать

Когда изменение стиля элемента на странице не влияет на его положение в потоке документов (например:color,background-color,visibilityд.), браузер назначит элементу новый стиль и перерисует его, этот процесс называется перерисовкой.

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

пропущен布局树и建图层树, перейдите непосредственно к рисованию списка, а затем перейдите к блоку, сгенерируйте растровое изображение и ряд операций.

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

синтез

Есть другая ситуация:Изменил один ни на макет, ни на рисунок, то механизм рендеринга пропустит компоновку и отрисовку и сразу выполнит последующиесинтезоперация, этот процесс называетсясинтез.

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

Воспользуйтесь этим:

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

Лучший способ повысить уровень композиции — использовать свойство CSS will-change.

Причины ускорения графического процессора

Например, с помощью CSS3transform,opacity,filterЭтими свойствами можно добиться эффекта синтеза, о котором часто говорятУскорение графического процессора.

• В случае компоновки пропустите непосредственно процесс компоновки и рисования и введите非主线程обрабатывающая часть, т.е. непосредственно переданная合成线程иметь дело с.
• полностью использоватьGPUПреимущество в том, что пул потоков будет вызываться в процессе генерации растрового изображения синтетическим потоком, и в нем будет использоваться пул потоков.GPUДля ускоренной генерации графические процессоры хорошо справляются с обработкой растровых данных.
• Он не занимает ресурсы основного потока, даже если основной поток зависает, эффект все равно отображается плавно.

Практическая значимость

• использоватьcreateDocumentFragmentМассовые манипуляции с DOM
• Обработка против сотрясения/дросселирования для изменения размера, прокрутки и т. д.
• Анимации реализованы с использованием преобразования или непрозрачности.
• Установите изменение элемента на непрозрачность, преобразование, верх, лево, низ, право. Таким образом, движок рендеринга будет реализовывать для него отдельный слой.При возникновении этих преобразований используется только поток синтеза для обработки этих преобразований без участия основного потока, что значительно повышает эффективность рендеринга.
• Для браузеров, которые не поддерживают свойство will-change, используйте свойство 3D-преобразования, чтобы принудительно перейти к композиции.transform: translateZ(0);
• оптимизация rAF и многое другое

Ссылаться на

Веб-работники, которых вы не знаете (Часть 1) [7,8 тыс. слов | Предупреждение о нескольких изображениях]

Geek Time — процесс рендеринга

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

How Browsers Work: Behind the scenes of modern web browsers

Самый полный! Иллюстрация того, как работает браузер

Стандарт W3C HTML5

Краткое описание процесса рендеринга в браузере и Composite (объединение слоев рендеринга)

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

Браузерная перекомпоновка и перерисовка

Оптимизация производительности беспроводной сети: Композитный

CSS GPU Animation: Doing It Right

В этой статье используетсяmdniceнабор текста