text-shadow (и другие css3) вызывает задержку прокрутки

Question

Я заметил, что чем больше я использую определенные элементы CSS3 (а именно box-shadow и text-shadow), тем больше задержка прокрутки существует на странице.Я замечаю проблему на FF4 и Chrome 10. Есть ли хороший способ измерить это или уменьшить его?Мне нужна хорошая производительность, но я также хочу иметь возможность использовать тени для создания размерности между различными элементами.

Спасибо!

Answer 1

Я нашел двух самых больших обидчиков (с точки зрения производительности) - степень размытия ваших теней и то, используете ли вы какие-либо альфы (rgba, hsl и т. Д.).

Аппаратное ускорение является ключом к использованию любых вкусностей css3 и поддержанию приемлемой производительности.Webkit (не уверен в FF4) даже не будет использовать графический процессор, если вы специально не попросите трехмерную операцию.Вы можете запустить графический процессор для любого элемента, просто применив 0-пиксельное 3d-преобразование:

-webkit-transform: translate3d(0,0,0);
/* OR */
-webkit-transform: translateZ(0);

Пол Ирриш имеет большой разговор о производительности css3 и использует флаги разработчика webkits для отладкиВизуализация с помощью графического процессора.

С терминала (OS X) вы можете запустить Safari с флагом отладки визуализации с помощью графического процессора:

CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari

Это покажет вам (в полупрозрачном красном), какие области DOMотображаются на графическом процессоре и какие из них отображаются процессором следующим образом .