Я взял запись производительности веб-страницы из своего веб-приложения с помощью вкладки Chrome dev tools performance. В основном я хотел проверить производительность прокрутки, поэтому прокручивал страницу во время записи. Вот скриншоты из записи:
Как видите, я выбрал один кадр для проверки это более подробно. Для рендеринга этого кадра потребовалось 33,8 мс, что дает мне всего 30 кадров в секунду вместо желаемых 60 кадров в секунду. Из рисунка видно, что большую часть времени занимал процесс Scroll Update, выделенный фиолетовыми полосами под вкладкой Input. Тем не менее, график не дает много информации о том, что на самом деле это Scroll Update? И почему это заняло так много времени?
Основной поток и другие потоки, такие как Растеризация, в значительной степени пусты, поэтому обычные подозреваемые, такие как layout, painting, compositing, не виноваты Вот. Итак, я хотел бы знать, какова реальная причина пропущенных кадров здесь и как я могу это исправить?