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