25 марта, 2013

Принудительное включение аппаратного ускорения на элементах сайта

.accelerate{
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}


Использование этого класса активирует аппаратную часть при отрисовке, что дает прирост к производительности. К каким элементам применять? Вот список


Specifically, if something matches one of these, then it can be accelerated (at least in Chromium):
  • Layer has 3D or perspective transform CSS properties
  • Layer is used by element using accelerated video decoding
  • Layer is used by a element with a 3D context or accelerated 2D context
  • Layer is used for a composited plugin
  • Layer uses a CSS animation for its opacity or uses an animated webkit transform
  • Layer uses accelerated CSS filters
  • Layer has a descendant that is a compositing layer
  • Layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer)