- Оригинальный адрес:Inside look at modern web browser (part 3)
- Оригинальный автор:Mariko Kosaka
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:ssshooter
- Корректор:ThomasWhyne, CoolRice
многопроцессная архитектураа такженавигационный поток.在这篇文章中，我们将一探渲染进程的内部机制。
Процесс рендеринга включает в себя множество аспектов веб-производительности. Поскольку поток процесса рендеринга слишком сложен, в этой статье представлен только обзор. Если вы хотите узнать больше, вы можете перейти наthe Performance section of Web FundamentalsНайти связанные ресурсы.
Когда процесс рендеринга получает сообщение фиксации навигации и начинает получать данные HTML, основной поток начинает синтаксический анализ текстовой строки (HTML) и преобразование ее в объектную модель документа (DOM).
Производительность DOM — это страница в браузере, веб-разработчики также могут взаимодействовать со структурами данных и API с помощью JavaScript.
Разбор HTML в DOM с помощьюHTML StandardРегулирование. Вы могли заметить, что HTML в браузере выкидывать ошибку из процесса не будет. картинаHi! <b>I'm <i>Chrome</b>!</i>Такой флаг ошибки будет интерпретироваться какHi! <b>I'm <i>Chrome</i></b><i>!</i>, потому что спецификация HTML изящно обрабатывает эти ошибки. Если вам интересно, как это делается, вы можете прочитатьAn introduction to error handling and strange cases in the parserчасть спецификации HTML.
загрузка подресурсов
Веб-сайты часто используют внешние ресурсы, такие как изображения, CSS и JavaScript, которые необходимо загружать из Интернета или кэшировать. При синтаксическом анализе и построении DOM основной потокМогуОни запрашиваются один за другим в порядке обработки, но для ускорения работы «сканер предварительной загрузки» запускается одновременно. Если документ HTML имеет<img>или<link>д., сканер предварительной загрузки просматривает разметку, сгенерированную парсером HTML, и отправляет запрос в сетевой поток в процессе браузера.
Рисунок 2: Основной поток анализирует HTML и строит DOM-дерево
JavaScript блокирует синтаксический анализ
Когда парсер HTML встречает<script>Если этот флажок установлен, синтаксический анализ HTML-документа приостанавливается, и начинается загрузка, синтаксический анализ и выполнение кода JavaScript. Почему? Поскольку JavaScript может использовать такие вещи, какdocument.write()Способ переписать документ, который изменит всю структуру DOM (HTML Specification Laneoverview of the parsing modelТам красивая картинка) Вот почему синтаксический анализатор HTML должен дождаться запуска JavaScript, прежде чем продолжить синтаксический анализ HTML-документа. Если вам интересно, что происходит при выполнении JavaScript, вы можете взглянуть наДоклад и сообщение в блоге от команды V8 по этому.
Подскажите браузеру как загрузить ресурс
Есть несколько способов, которыми веб-разработчики могут отправлять подсказки браузеру, чтобы хорошо загружать ресурсы. Если ваш JavaScript не используетdocument.write(), ты сможешь<script>Метки добавленыasyncилиdeferсвойство, чтобы браузер загружал и запускал код JavaScript асинхронно, не блокируя синтаксический анализ. При необходимости вы также можете использоватьМодули JavaScript. можно использовать<link rel="preload">Сообщите браузеру, что ресурс обязательно нужен для текущей навигации и что вы хотите загрузить его как можно скорее. Для получения дополнительной информации см.Приоритизация ресурсов — как заставить браузер помочь вам.
расчет стиля
Просто наличие Дом недостаточно, чтобы определить, как выглядит страница, потому что мы стиль элементы страницы в CSS. Основная резьба разрабатывает CSS и определяет вычисленные стили для каждого узла DOM. Это информация о том, какие стили применяются к каждому элементу на основе селекторов CSS, которые можно найти в DevtoolscomputedСмотрите в разделе.
Рисунок 3: Основной поток после разбора стилей CSS для добавления вычислений
即使你不提供任何 CSS，每个 DOM 节点都具有计算样式。 картина<h1><h2>.
макет
Теперь процессу рендеринга известны стили каждого узла и структура документа, но этого недостаточно для рендеринга страницы. Представьте, что вы пытаетесь описать картину своему другу по телефону: «Вот большой красный круг и маленький синий квадрат».
Рисунок 4: Человек, стоящий перед картиной с телефонной линией, подключенной к другому человеку.
Макет - это процесс расчета геометрии элемента. Основная нить пересекает DOM и создает дерево расчета стиля макета, содержащее координаты X Y и размер информации ограничивающей коробки. Дерево макета может быть связано с структурой DOM Dreak, аналогичной, но она содержит только информацию, связанную с содержимым, видимым на странице. Если элемент приложенияdisplay：none, то элемент не является частью дерева компоновки (ноvisibility：hiddenэлемент в дереве компоновки). Точно так же, если применяется, напримерp::before{content:"Hi!"}псевдокласс, он включается в дерево компоновки, даже если его нет в DOM.
Рисунок 5. Основной поток проходит по стилизованному дереву DOM для создания дерева компоновки.
Рис. 6. Макет блока перемещен из-за переноса строк
Определение макета страницы является сложной задачей. Даже самые простые макеты страниц, такие как поток блоков сверху вниз, должны учитывать размер шрифтов и положение разрывов строк, которые влияют на размер и форму абзаца и, в свою очередь, на размещение следующего абзаца.
CSS может перемещать элементы в сторону, скрывать выходящие за пределы элементы и изменять направление письма. Вы можете себе представить грандиозность задачи на этом этапе. В Chrome есть целая команда инженеров, ответственных за макет.Несколько интервью с конференции BlinkOnПодробности их работы записываются, и если вам интересно, вы можете о них узнать, что очень интересно.
рисовать
Рисунок 7: Человек держит перо, стоя перед холстом, думая о рисовании своей первой или первой картиной
У DOM, стиля и макета до сих пор не хватает, чтобы сделать страницу. Предположим, вы пытаетесь воспроизвести картину. Вы знаете размер, форму и местоположение элементов, но вам все равно нужно судить порядок рисования их.
Например, вы можете установить его для некоторых элементовz-indexНа данный момент порядок элементов, написанных в HTML, может вызвать ошибки рендеринга.
<canvas>элемент, то этот процесс может быть вам знаком.
Рисунок 9: Основной поток проходит по дереву компоновки и генерирует записи отрисовки
Обновление конвейера рендеринга дорого
Рендеринг-трубопровод - самое главное: каждый шаг, результат предыдущей операции для операции создает новые данные. Например, если что-то произошло с изменением макета дерева, вам необходимо восстановить инструкцию «Рисование» к пораженной части документа.
Если элемент должен быть анимирован, браузер должен выполнять эти операции между каждым кадром. Большинство мониторов обновляют экран 60 раз в секунду (60 кадров в секунду), и когда экран меняется каждый кадр, человеческому глазу анимация кажется плавной. Однако, если в анимации отсутствуют некоторые промежуточные кадры, страница выглядит дрянной.
Рисунок 11: кадры анимации на оси времени
Даже если операции рендеринга могут идти в ногу с обновлениями экрана, эти вычисления выполняются в основном потоке, что означает, что анимация может блокироваться, пока ваше приложение выполняет JavaScript.
Рис. 12. Кадры анимации на временной шкале, но JavaScript блокирует один кадр
Вы можете разделить операции JavaScript на небольшие фрагменты и использоватьrequestAnimationFrame()запускать на каждом кадре. Для получения дополнительной информации по этой теме см.Optimize JavaScript Execution. вы также можетеЗапуск JavaScript в Web Workersчтобы не блокировать основной поток.
Рис. 13. Меньшие блоки JavaScript на временной шкале с кадрами анимации
синтез
Как нарисовать страницу?
Рисунок 14: Схематическая анимация простой обработки растра
Простой способ справиться с этим — сначала растрировать экран внутри области просмотра, а если пользователь прокручивает страницу, переместить растровое поле и растрировать, чтобы заполнить недостающие части. Так обрабатывалась растеризация при первом выпуске Chrome. Однако современные браузеры выполняют более сложный процесс, который мы называем композицией.
что такое синтез
Рисунок 15: Схематический процесс синтеза в процессе
Панель слоевПосмотрите, как накладывается ваш сайт.
Слоистый
Чтобы узнать, какие элементы находятся на каких слоях, основной поток проходит по дереву компоновки, чтобы создать дерево слоев (эта часть называется «Обновить дерево слоев» на панели производительности DevTools). Если части страницы, которые должны быть отдельными слоями (например, выдвижное боковое меню), не разделены, вы можете использовать CSSwill-changeсвойство для запроса браузера.
Рис. 16. Основной поток проходит по дереву компоновки, чтобы сгенерировать дерево слоев.
Вы можете захотеть наслоить каждый элемент, но компоновка большого количества слоев может быть медленнее, чем растеризация страницы в каждом кадре, поэтому измерение производительности рендеринга вашего приложения имеет решающее значение. Для получения дополнительной информации по этой теме см.Stick to Compositor-Only Properties and Manage Layer Count.
Растеризация и композитинг в основном потоке
Как только дерево слоев создано и порядок прорисовки определен, основной поток отправляет эту информацию в поток компоновки. Затем поток компоновки растрирует каждый слой. Слой может быть размером с целую страницу, поэтому поток компоновки разбивает их на части и отправляет в растровый поток. Растровый поток растрирует каждый тайл и сохраняет их в видеопамяти.
Рисунок 17: Raster Thread создает растровое изображение блока, отправленного в GPU
Поток компоновки отдает приоритет различным растровым потокам, так что кадр в области просмотра (или поблизости) может быть растеризован первым. Слои также имеют несколько блоков с разным разрешением, которые могут обрабатывать такие действия, как операции увеличения.
Как только блоки растеризованы, поток компоновки собирает информацию об этих блоках (называемую)Создайте.
Он содержит такую информацию, как местоположение в блоке памяти, положение блока в синтезе рендеринга страницы и т.п.
составная рама
Набор четырехугольников для рисования, представляющих один кадр страницы.
Затем составной кадр передается в процесс браузера через IPC (межпроцессное взаимодействие). На этом этапе можно добавить еще один кадр композитинга из потока пользовательского интерфейса или процесса рендеринга другого плагина. Эти кадры композитора отправляются на графический процессор и отображаются на экране. Если получено событие прокрутки, поток композитинга создает еще один кадр композитинга для отправки в графический процессор.
Рис. 18. Поток композиции создает кадр композиции, отправляет его в процесс браузера, а затем в графический процессор
合成的好处是它可以在不涉及主线程的情况下完成。合成线程不需要等待样式计算或 JavaScript 执行。 поэтомутолько составная анимацияСчитается лучшим выбором для плавной работы. Если макет или чертеж необходимо просчитать заново, необходимо задействовать основную нить.
Суммировать
В этом посте мы рассмотрели конвейер рендеринга от синтаксического анализа до компоновки, и, надеюсь, теперь вы сами можете узнать больше об оптимизации производительности веб-сайта.
В следующей и последней статье этой серии мы более подробно рассмотрим потоки композиции и посмотрим, что происходит, когда пользователь перемещает или щелкает мышью.
Понравилась ли Вам эта статья? Если у вас есть какие-либо вопросы или предложения для будущих статей, я буду рад опубликовать их в разделе комментариев ниже или в Twitter.@kosamariсвяжусь с тобой.
Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,Блочная цепь,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.