Я создаю анимационное/переходное тяжелое веб-приложение с большим количеством контента. В приложении много композиционных слоев, поскольку все перемещается/анимируется с помощью css-преобразований. Я пытаюсь отлаживать приложение, чтобы узнать об узких местах, и я заметил много событий "Обновить дерево слоев" в режиме Chrome DevTools → Timeline → Frames, например:
Есть ли у кого-нибудь идеи, что может быть причиной этого? Что означает "Обновить дерево слоев"?
Сначала вы должны понять, что такое Render Layer. Render Layer представляет собой представление браузеров о том, как сделать это node, и как оно относится к другим узлам с таким же координатным пространством, чтобы иметь дело с такими вещами, как перекрытие содержимого, рисование и т.д. Update Layer Tree может происходить из нескольких разные вещи. Например, если вы используете javascript для установки стиля для элемента, то Layer Tree нужно будет вычислить и обновить. Или, возможно, он должен синхронизировать Layer Tree между потоком композиторов (где текстуры загружаются в графический процессор) и основной поток (где выполняется javascript).
В вашем случае я бы угадал, что вы вызываете фундаментальное нарушение уровня, которое вынуждает его обновлять слой вверх по иерархии дерева, который затем стекает по дереву и вызывает каждый из эти слои должны быть обновлены. Хотя трудно сказать, не глядя на ваш код.
В любом случае, если этот длинный Update Layer Tree последовательно выполняется до того, как Layout будет пересчитан, это, безусловно, связано с этим.
Вот некоторые ресурсы, которые помогут вам начать работу.
Прочитайте эту статью HTML5 Rocks о браузерах Layers. Ускоренный рендеринг в Chrome
или эта другая статья HTML5 Rocks о композиции. Высокопроизводительные анимации
И если вам нужно глубокое понимание того, как хром отображает страницу и использует GPU в этом процессе. В блоге Chromium есть замечательная статья. ускоренный состав графического процессора в Chrome
Удачи.