Chrome DevTools Timeline Update Layer Tree Event

Question

Я создаю анимационное/переходное тяжелое веб-приложение с большим количеством контента. В приложении много композиционных слоев, поскольку все перемещается/анимируется с помощью css-преобразований. Я пытаюсь отлаживать приложение, чтобы найти просчет узких мест, и я заметил много «Обновление слоя Tree» событий в Chrome DevTools -> Timeline -> Режим Frames как:

Кто-нибудь есть идея Что может быть причиной этого? Что означает «Обновление дерева слоев»?

Answer 1

Сначала вы должны понять, что такое Render Layer. Render Layer - это представление браузеров о том, как визуализировать этот узел, и как оно относится к другим узлам с таким же координатным пространством, чтобы иметь дело с такими вещами, как перекрытие содержимого, рисование и т. Д. Update Layer Tree может происходить из разных вещей. Например, если вы используете javascript для установки стиля в элементе, необходимо будет вычислить и обновить Layer Tree. Или, возможно, он должен синхронизировать Layer Tree между потоком композиторов (где текстуры загружаются на GPU) и основным потоком (где работает javascript).

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

В любом случае, если этот длинный Update Layer Tree последовательно происходит до того, как пересчитывается Layout, это, безусловно, связано с этим.

Вот несколько ресурсов, которые помогут вам начать работу.

Читайте об этом HTML5 Скачайте статью о браузерах Layers. Accelerated Rendering in Chrome

или другая статья HTML5 Rocks о композиции. High Performance Animations

И если вам нужно глубокое понимание того, как хром создает страницу и использует GPU в этом процессе. В блоге Chromium есть замечательная статья. GPU Accelerated Compositing in Chrome

Удачи.