Оригинальный адрес:The Anatomy of a Frame

Оригинальный автор:Paul

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:WangLeto

Корректор:Xuyuey, Fengziyin1234, L9m

Анализ принципа фрейма браузера

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

Предупреждение: текст — это точка зрения Blink и Chrome. Большинство задач основного потока каким-то образом "разделяются" со всеми сторонними задачами (поставщиками), например расчет макета и стиля, но общая архитектура может быть не так.

Одна картинка стоит тысячи слов

Это правда, давайте сначала посмотрим на картинку:

The process of getting pixels to screen.

Полный процесс размещения пикселей на экране.

скачать изображение

обработать

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

Начнем с процесса:

процесс рендеринга. Контейнер для обертывания вкладок. Содержит несколько потоков, которые вместе отвечают за все аспекты страницы, отображаемой на экране. Эти темы имеютКомпозитор,Поток растеризации тайлов (Tile Worker),а такжеосновной поток.
Процесс графического процессора. Это единый процесс, который обслуживает все вкладки и процессы, окружающие браузер. Когда кадр отправляется, процесс графического процессора загружает мозаичное растровое изображение и другие данные (например, четырехъядерные вершины и матрицы) в графический процессор, чтобы фактически отобразить пиксели на экране. Процесс GPU имеет только один поток, называемый потоком GPU, который фактически выполняет работу.

Потоки в процессе рендеринга

Теперь посмотрим на потоки в процессе рендеринга.

Поток композитора. Это поток, который первым уведомляется о событии вертикальной синхронизации (сигнал операционной системы, сообщающий браузеру о необходимости обновить кадр изображения). Он получает все входные события. Если возможно, поток компоновки избегает входа в основной поток и пытается сам преобразовать входные события (например, прокрутку) в движения экрана. Он обновляет положение слоя и делает это, отправляя кадры непосредственно на графический процессор через поток графического процессора. Если входное событие необходимо обработать или есть другая работа по отображению, он не сможет завершить процесс напрямую, для чего требуется основной поток.
основной поток. Здесь браузеры выполняют задачи, которые мы знаем и любим: JavaScript, стилизация, макет и рендеринг. (Это изменится позже, сHoudini, мы можем запустить некоторый код в синтетическом потоке) Основной поток выигрывает награду «Скорее всего, вызовет джанк» во многом из-за того, что у него слишком много дел. (Аннотация: дрожание относится к дрожанию содержимого страницы, поскольку частота обновления содержимого страницы не может соответствовать частоте обновления экрана)
Композитор Плитка Рабочий. Один или несколько потоков, производных от потока композиции, для обработки задач растеризации. Мы обсудим это позже.

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

ты тоже можешь представитьService Workerа такжеWeb Workerсуществуют в процессе рендеринга, хотя я пропустил их, потому что они все усложняют.

Процесс работы

Обзор основной темы.скачать изображение

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

Также стоит отметить, что на изображении выше RecalcStyles и Layout указывают ниже.requestAnimationFrameКрасная стрелка. Вполне возможно вызвать в вашем коде ровно обе эти ситуации. Эта ситуация называется принудительной синхронной компоновкой (или принудительными синхронными стилями, Forced Synchronous Layout и Forced Synchronous Styles) и обычно плохо влияет на производительность.

начать новый кадр. Сигнал вертикальной синхронизации запускается, чтобы начать рендеринг нового кадра изображения.
Обработка событий ввода. Передайте входные данные из потока композиции в обработчик событий основного потока. Все обработчики событий (touchmove,scroll,click) должны срабатывать все сначала, каждый кадр, но это не обязательно; планировщик сделает все возможное, чтобы попытаться, но действительно ли он срабатывает каждый кадр, зависит от ОС. Также существует задержка между моментом, когда пользователь взаимодействует с событием, и моментом, когда событие доставляется в основной поток.
requestAnimationFrame. Это идеальное место для обновления того, что отображается на экране, так как теперь есть совершенно новые входные данные, и они очень близки к предстоящему сигналу вертикальной синхронизации. Другие задачи визуализации, такие как расчет стиля, т.к. он есть в этой задачеПозжеТак что теперь идеальное место для изменения элемента. Если вы измените стили - скажите 100 классов, это не вызывает 100 расчетов стилей; они будут добиться позже. Единственное предостережение - не запрашивать свойства стиля или макета, которые требуют вычисления (например,el.style.backgroundImageилиel.style.offsetWidth). если тысделал это, приведет к пересчету стилей, макета или того и другого, что еще большеПринудительная синхронная компоновка и даже неровности компоновки.
Разобрать HTML (разобрать HTML). Обрабатывать вновь добавленный HTML, создавая элементы DOM. во время загрузки страницы илиappendChildПосле операции вы можете увидеть больше этого процесса.
Пересчет стилей. Рассчитывайте стили для вновь добавленного или измененного контента. Может вычислить все дерево DOM или сузить его, в зависимости от того, что было изменено. Например, изменение имени класса тела может иметь большое значение, но стоит отметить, что браузеры достаточно умны, чтобы автоматически ограничивать область пересчета стилей.
Макет. Рассчитайте геометрическую информацию (положение и размер каждого элемента) каждого видимого элемента. Как правило, применительно ко всему документу вычислительные затраты обычно пропорциональны размеру элемента DOM.
Обновить дерево слоев. На этом шаге создается контекст наложения и сортируется глубина элементов.
Paint. Процесс разделен на два шага: первый шаг — запись вызова отрисовки для всех вновь добавленных элементов или элементов, изменяющих состояние отображения (здесь закрасьте прямоугольник, там напишите шрифт Брайля); второй шаг —Растрированный(Растеризация, см. далее), на этом шаге фактически выполняется вызов отрисовки и выполняется заливка текстурой. Процедура Paint записывает вызовы отрисовки и, как правило, выполняется быстрее, чем растеризация, но эти две части часто вместе называются «рисованием».
Композитный: после вычисления информации о слое и тайле она отправляется обратно в поток синтеза для обработки. Это будет включатьwill-change, перекрывающиеся элементы, холст с аппаратным ускорением и т. д.
Растр по расписаниюа такжеРастеризовать: Вызов отрисовки, записанный в задаче Paint, теперь выполняется. процессПоток растеризации составного тайла(Compositor Tile Workers), количество потоков зависит от платформы и производительности устройства. Например, на Android-устройствах обычно один поток, а на десктопных иногда 4. Растеризация выполняется слоями, и каждый слой делится на блоки.
Конец рамы: После того, как все блоки для каждого слоя растет в растровые изображения, новые блоки и входные данные (возможно, изменены в обработчиках событий), отправляются в тему GPU.
отправить кадр: Последнее, но не менее важное: тайлы загружаются в GPU потоком GPU. Графический процессор использует квадраты и матрицы (все распространенные типы данных GL) для рисования плиток на экране.

время благосостояния

requestIdleCallback: Если в конце кадра у основного потока еще есть время,requestIdleCallbackможет быть запущен. Это отличная возможность выполнить второстепенную работу, например пометить данные аналитики. Если вы не знакомы сrequestIdleCallback,Начало работы с разработчиками Googleмогу помочь тебе.

два слоя

В рабочем процессе есть две версии глубокой сортировки.

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

Затем идет композитный слой, который в основном используется для рисования элементов в конце описанного выше процесса. Вы можете использовать трюк с пустым преобразованиемtranslateZ(0,0)принудительно включить аппаратное ускорение) илиwill-change: transformПревращает элемент в составной слой, чтобы можно было легко использовать анимацию преобразования (хорошо для анимации!). Но если есть перекрывающиеся элементы, браузеру также может потребоваться создать дополнительные слои композиции, чтобы сохранитьz-indexИли порядок глубины, указанный другими свойствами. интересно!

Расширенное чтение

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

Однако на Android пиксельный поток растеризуется по-другому: GPU используется немного больше. Выполняйте вызовы отрисовки с помощью команд GL на шейдерах графического процессора вместо растеризации в потоке растеризации композитного тайла.

Это называетсяРастеризация графического процессора, это способ удешевить покраску. Включив FPS Meter в Chrome DevTools, вы можете увидеть, использует ли страница растеризацию GPU.

The FPS meter indicating GPU Rasterization is in use.

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

Другие источники

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

Compositing in Blink & WebKit. A little old now, but still worth a watch.
Browser Rendering Performance - Google Developers
Browser Rendering Performance - Udacity Course (totally free!).
Houdini - The future, where you get to add more script to more parts of the flow.

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.