Какие рычаги можно использовать для сокращения операций UpdateLayerTree в Blink?

Я работаю над веб-приложением, встроенным в недорогие устройства, и во время рендеринга я выполняю длительные update layer tree операции.

Я знаю, что update layer tree — это операция, состоящая в вычислении или перевычислении информации, относящейся к RenderLayers, обычно потому, что верхний уровень был признан недействительным. Я нашел этот предыдущий пост, который довольно хорошо объясняет это: Chrome DevTools Timeline Update Layer Tree Event .

Мое приложение построено вокруг компонентов, и каждый из них может иметь несколько слоев. Если я тестирую свои компоненты по отдельности, все работает нормально, и я получаю отличные результаты (отличный fps, плавная анимация). Теперь, когда я собираю все воедино, выступления разваливаются. То, что я вижу в инструментах разработчика Chrome, длинное UpdateLayerTree.

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

  • Является ли количество слоев единственным рычагом для уменьшения UpdateLayerTree? (Например, влияет ли на это размер слоя?)
  • Есть ли какие-то трюки, которые запускают быстрый путь рендеринга в Blink, который может избежать или уменьшить операции обновления дерева слоев в некоторых конкретных случаях (я думаю, это относится к встроенному преобразованию?)
  • Вы видите что-то еще?

С уважением,

(Кроме того, в качестве примечания, я открыл вопрос в проекте хрома, чтобы получить отзывы об этом некоторое время назад: https://bugs.chromium.org/p/chromium/issues/detail?id=725712.)


javascript css chromium blink
person Samuel Maisonneuve    schedule 14.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

  1. Уменьшите количество слоев (обычно удаляя позиционированные элементы), когда это возможно.
  2. Используйте display:none, когда элемент фактически не виден в окне просмотра. display:none как двойное преимущество: элементы уже разобраны, но не отрисованы. Поскольку они не визуализируются, они игнорируются операцией UpdateLayerTree, но это все равно ускоряет визуализацию, если нам это нужно (поскольку они уже находятся в DOM).

Может быть, кто-то из вас придумает другие техники?

person Samuel Maisonneuve    schedule 20.03.2018