Tweaking CSS3 for Hardware Acceleration

Tweaking CSS3 for Hardware Acceleration

Presented at DevNexus 2014, Atlanta (GA).

New CSS3 features such as animation, transition, and filters empower web designers to enrich the web pages with various types of interactivity and effects. Modern browsers, both on the desktop and mobile, are capable of rendering these CSS3 effects with the dedicated graphics processing unit (GPU) by using the compositing technique. There has been a lot of well-known CSS3 best practices, often centered around "use 3-d transform”. This talk sheds some more light on the browser interactions with the GPU and explain what happens behind the scenes, particularly for the objective of maximizing the synergy between the GPU and the CPU to have the most optimal CSS rendering performance.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

February 24, 2014
Tweet

Transcript

  1. 3.
  2. 4.
  3. 7.

    Web Page vs Game Predictable content/assets ✔ Mostly text ✔

    Mostly images ✔ Initial response immediate
  4. 18.

    Physical Limitations Memory Can’t store too much stuff Speed CPU

    is faster for some operations Bandwidth Data transfer can be the bottleneck Power Electrons always need energy
  5. 20.

    Fluid Animation At the beginning, push as many resources as

    possible to the GPU During the animation, minimize the interaction between CPU-GPU 1 2
  6. 21.

    Rendering Styles For every animation tick... At the beginning Draw

    the shape onto a buffer Blit the buffer at (x,y) x = x + 10 Draw the shape at (x, y) x = x + 10 Immediate Retained
  7. 43.

    Color Transition @keyframes box { 0% { transform: background-color: blue;

    } 100% { transform: background-color: green; } }
  8. 48.

    No Silver Bullet • Use CSS3 animation & transition •

    Be advised of texture uploads • Never assume, always measure