Ваш пример на самом деле выглядит не так уж плохо. Ваш код работает быстро, и браузер будет рендерить только со скоростью 60 кадров в секунду, поэтому он тратит немного времени (до 16 мс) на ожидание следующего цикла рендеринга.
Вот особенно тревожный снимок из представления Кадры на панели Временная шкала инструментов разработчика Chrome.
Согласно документации:
- Серые области указывают на действия, которые не были инструментированы DevTools, и команда Chrome работает над тем, чтобы эта область была как можно меньше.
- Чистые области указывают на время простоя между циклами обновления дисплея, что обычно не является проблемой, особенно если область достигает линии 60 кадров в секунду, так как это просто Chrome, ожидающий доставки кадра на вертикальную синхронизацию монитора.
Исчезающе маленькие желтые и зеленые области в нижней части столбцов указывают на то, что обработка событий, рисование и компоновка выполнялись довольно быстро — достаточно быстро, чтобы попасть под горизонтальную линию, указывающую порог 30 кадров в секунду, и, вероятно, быстрее порога 60 кадров в секунду в большинстве случаев. время (линия не показана).
Чтобы узнать больше, откройте параметры инструментов разработчика и проверьте:
Если эта функция включена, вы увидите серые области на панели «ЗАПИСИ»:
Каждая серая область показывает периоды, в течение которых поток рендерера был занят. Если вы видите много пробелов, вероятно, браузер был привязан к GPU.
Нат Дука, инженер Chrome, предоставляет дополнительную информацию в этом сообщении:
Ограниченность графического процессора обычно возникает из-за двух вещей:
- наличие -webkit-filter сохраняет 3D-свойства элементов. Те разъедают GPU, как... гм, что-то голодное.
- слишком много больших слоев.
Слои? «Показать границы композитного слоя», чтобы увидеть их. Проблемы у большинства людей возникают не из-за количества слоев, а из-за площади слоев.
Эмпирическое правило: большинство компьютеров спроектированы таким образом, что они могут касаться каждого пикселя на главном экране примерно 4 раза. В качестве действительно простого примера, 2-летний MacBook Air рассчитан на размер своего ЖК-дисплея. Когда вы подключаете 30-дюймовый монитор, который имеет более одного слоя, он начинает привязываться к графическому процессору.
Почему это важно? [Ручное движение] слой касается пикселя один раз, когда мы рисуем экран. Если слой имеет размер вашего окна, например. у вас есть ширина = 100% высота = 100% div с -webkit-transform: translateZ (0), тогда вы касаетесь каждого пикселя экрана один раз. Итак, подсчитайте площадь ваших слоев, и если вы превысите в 4 раза площадь вашего монитора, вы не сможете отправиться в космос [потому что вы привязаны к графическому процессору].
Хорошим тестом на ограниченность графического процессора является уменьшение размера окна на 1/2 в каждом измерении. Если все остается медленным, то происходит что-то еще... если все становится быстрее, вы, вероятно, нагружаете графический процессор.
В моем случае (показанном на самой верхней картинке) я все еще пытаюсь выяснить, что вызывает серые полосы. Код не изменился, и производительность была отличной. Возможно, более новая сборка Chrome (сегодня я использую 31.0.1650.57 m) по какой-то причине не работает с этим кодом. Опять же, серые области указывают на то, что поток рендеринга был занят неинструментальным кодом, поэтому трудно сказать, что происходит.
person
Drew Noakes
schedule
27.11.2013
