Медленная растеризация в Dev Tools

Question

Я оптимизирую сайт с довольно простой прокруткой параллакса. Анимированные элементы находятся на отдельных слоях (backface-visibility:hidden), а шаги сценариев и рендеринга выглядят довольно быстро. Однако я вижу много времени, затрачиваемого на картине:

Фактический рисунок хорошо, но те огромные hollow green bars представляют растеризации в отдельном потоке композитора.

Here's the link

Что я делаю, чтобы вызвать, что и как я могу это исправить?

Answer 1

Хорошо, я могу воспроизвести полые стержни.

Они происходят на наборщику нити, поэтому мы делаем их полыми. Вы можете увидеть это более четко стряхивая к пламени схеме:

Затем, если вы записали график с Paint галочкой вы можете увидеть именно то, что было внутри каждой краски.

И мы можем использовать ползунок, чтобы сузить, которые прокачивают звонки являются самой дорогой частью этих больших красок:

(выглядит как большой cliprect и затем bitmap draw)

Но, глядя в совокупности, кажется, что вы перекрасили мир в каждый кадр.

Вы можете посмотреть на то, что происходит в каждом кадре ... особенно для ваших слоев:

ОДНАКО.

В конце концов, вы можете решить свои проблемы с анимированием transform:translate() вместо left/top. Я бы также рекомендовал добавить will-change:transform к этим элементам. Это позволит обозревателю перемещать объекты без перекраски, и вам не придется перерисовывать на каждом кадре.

обязательно читает:

• Animations and Performance - web fundamentals
• High Performance Animations - html5rocks

Приветствия