Блог

Главная - Вопросы по программированию - text-shadow (и другие css3) вызывает задержку прокрутки

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

#performance #css

#Производительность #css

Вопрос:

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

Спасибо!

Ответ №1:

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

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

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

Пол Айриш отлично рассказал о производительности css3 и использовании флагов разработчиков webkits для отладки рендеринга GPU.

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

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

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

Ответ №2:

Похоже, что -webkit-transform обходной путь больше не работает в Chrome и MS Edge. (Оба основаны на Blink, который разветвился на WebKit в 2013 году.) Но Firefox и Safari, похоже, теперь работают text-shadow просто отлично, без каких-либо задержек.

Я смог избежать text-shadow задержки, используя drop-shadow() вместо:

 .shadow {
  /* text-shadow: 1px 2px 4px black; */
  filter: drop-shadow(1px 2px 4px black);
}  
 <ul>
  <li class="shadow">Item 1</li>
  <li class="shadow">Item 2</li>
  <li class="shadow">Item 3</li>
</ul>

<ul class="shadow" style="background: pink">
  <li>Effect of applying <code>drop-shadow</code> to an entire div</li>
  <li><code>drop-shadow</code> is based on the alpha mask of the entire element</li>
</ul>

Единственное ограничение здесь заключается в том, что вам нужно будет установить filter для каждого отдельного элемента содержимого, а не для одного корневого элемента. В противном случае тень применяется ко всему элементу, как box-shadow , если у него непрозрачный фон.

Ознакомьтесь с документами MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow