Подтвердить что ты не робот

Что вызывает этот чрезмерный цикл "Композитные слои", "Пересчитать стиль" и "Обновить дерево слоев"?

Меня очень заинтриговало чрезмерное количество "составных слоев", "пересчитать стиль" и затем "обновить дерево слоев" в одном из наших веб-приложений. Мне интересно, что их вызывает здесь.

Если вы укажете свой Chrome на один из наших быстро движущихся потоков, скажите https://choir.io/player/beachmonks/github и включите свой "счетчик FPS", вы увидите, что приложение может достигать около 60 кадров в секунду в большинстве случаев, когда мы находимся на вершине.

Однако, как только я прокручиваю несколько сообщений и оставляю экран таким, какой он есть, скорость FPS резко падает примерно до 10 или даже ниже. Что здесь делает код, так это то, что он отображает каждое входящее сообщение, добавляет его вверху и прокручивает список вверх по Npx, который является высотой нового сообщения, чтобы сохранить позицию просмотра в целости.

(Я понимаю, что scrollTop приведет к недействительности экрана, но я тщательно заказал операции, чтобы избежать разметки разметки. Я также знаю об синхронной перерисовке, которая происходит каждую секунду, вызванная jquery.sparkline, но это не имеет отношения к этому обсуждение.)

Вот что я вижу, когда пытаюсь его профилировать. low fps profiling result.

Как вы думаете, может быть причиной большого количества операций с слоем?

4b9b3361

Ответ 1

Некоторая информация о Composite Layers, которая может помочь

из того, что я вижу здесь он говорит

событие: составные слои

Описание: хром-рендеринг сработал слои изображения.

для значения слова композит из wikipedia

Композиция - это объединение визуальных элементов из отдельных источников в отдельные изображения, часто для создания иллюзии, что все эти элементы являются частью одной и той же сцены

так что это процесс создания страницы, которую мы видим на самом деле, используя вывод кодирования/изменения размеров изображений, анализируем HTML и анализируем CSS, чтобы сделать последнюю страницу, которую мы видим

Ответ 2

Свойство CSS will-change: transform для всех элементов, нуждающихся в перерисовке, решило проблему со слишком большим количеством составных слоев для меня.

Ответ 3

У меня была такая же проблема. Я исправил его, уменьшив размер изображений.

В прокручиваемом списке были несколько эскизов. Размер каждого эскиза был 3000x1800, но они были изменены CSS до 62x44. Использование изображений 62х44 уменьшило время, затрачиваемое на "Композитные слои".