Ответ 1
Ваш пример на самом деле выглядит не так уж плохо. Ваш код работает быстро, и браузер будет отображать только 60 кадров в секунду, поэтому он проводит некоторое время (до 16 мс), ожидая следующего цикла рендеринга.
Вот особенно тревожный снимок из представления Frames на панели Timeline Chrome Tools.
В соответствии с документацией:
- Серые области показывают активность, которая не была обработана DevTools, и команда Chrome работает, чтобы сохранить эту область как можно меньше.
- Ясные области указывают время простоя между циклами обновления дисплея, что обычно не является проблемой, особенно если область приносит значения до 60 кадров в секунду, так как это только Хром, ожидающий доставки кадра на vsync монитора
исчезающе маленькие желтые и зеленые области внизу баров указывают на то, что обработка событий, покраска и компоновка выполнялись довольно быстро - достаточно быстро, чтобы попасть под горизонтальную линию, указывающую порог 30fps и, вероятно, быстрее, чем 60fps (строка не показана).
Чтобы узнать больше, откройте параметры инструментов разработчика и проверьте:
При этом вы увидите серые области на панели "RECORDS":
Каждая серая область показывает периоды, в течение которых поток визуализации был занят. Если вы видите много пробелов, тогда браузер, скорее всего, связан с GPU.
Nat Duca, инженер в Chrome, предоставляет дополнительную информацию в этот пост:
Ограниченность GPU обычно происходит из двух вещей:
- имеющий -webkit-фильтр, сохраняет свойства 3D на элементах. Те едят в gpu как... гм, что-то голодное.
- Слишком много больших слоев.
Слои? "Покажите слои композитного слоя", чтобы увидеть их. Место, в которое попадает большинство людей, - это не количество слоев, а область слоев.
Правило большого пальца: большинство компьютеров сконструированы так, что они могут касаться каждого пикселя на главном экране примерно 4 раза. Как действительно простой пример, 2-летний MacBook Air предоставляется для размера ЖК-дисплея. Когда вы подключаете 30-дюймовый монитор с несколькими слоями, он начинает получать GPU.
Почему это имеет значение? [Handwaving], слой нажимает один пиксель один раз, когда мы рисуем экран. Если слой является размером вашего окна, например. у вас есть ширина = 100% height = 100% div с -webkit-transform: translateZ (0), затем вы касаетесь каждого пикселя экрана один раз. Итак, подсчитайте область ваших слоев, и если вы превысите в 4 раза площадь вашего монитора, вы не сможете перейти в космос [потому что вы связаны с GPU].
Хорошим критерием ограниченности gpu является уменьшение размера окна на 1/2 в каждом измерении. Если все идет медленно, то происходит что-то еще... если все будет быстрее, вы, вероятно, попадете на GPU.
В моем случае (показанном на самом верхнем изображении) я все еще пытаюсь выяснить, что вызывает серые полосы. Код не изменился, и производительность была отличной. Возможно, что новая версия Chrome (сегодня я использую 31.0.1650.57 м) по какой-то причине не работает с этим кодом. Опять же, серые области показывают, что поток рендеринга занят неинструментированным кодом, поэтому трудно сказать, что происходит.