На временной шкале dev, каковы пустые зеленые прямоугольники?

В хронологической таблице инструментов Chrome dev, в чем разница между заполненными зелеными прямоугольниками (которые представляют операции с красками) и пустыми зелеными прямоугольниками (которые, по-видимому, также представляют что-то о работе с красками)?

Ответ 1

Живопись - это действительно две задачи: рисовать вызовы и растеризацию.

Нарисуйте вызовы. Это список вещей, которые вы хотите нарисовать, и их вывод из CSS, примененный к вашим элементам. В конечном счете есть список вызовов рисования, которые не отличаются от элементов Canvas: moveTo, lineTo, fillRect (хотя они имеют несколько разные имена в Skia, Chrome, back back, это аналогичная концепция.)
растеризации. Процесс перехода через эти призывы рисования и заполнение фактических пикселей в буферах, которые могут быть загружены на GPU для компоновки.

Итак, с этим фоном, здесь мы идем:

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

По существу, тогда оба являются красками, они просто представляют разные подзадачи общей работы. Если у вас проблемы с производительностью (и из того, что вы предоставили, вы, как представляется, связаны с краской), вам может потребоваться изучить, какие свойства вы меняете с помощью CSS или JavaScript, и посмотреть, есть ли способ, основанный только на композиторе те же цели. Триггеры CSS, возможно, помогут здесь.