{"id":20214,"date":"2013-02-22T13:11:35","date_gmt":"2013-02-22T20:11:35","guid":{"rendered":"http:\/\/css-tricks.com\/?p=20214"},"modified":"2013-02-22T14:57:35","modified_gmt":"2013-02-22T21:57:35","slug":"w3conf-ariya-hidayat-fluid-user-interface-with-hardware-acceleration","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/w3conf-ariya-hidayat-fluid-user-interface-with-hardware-acceleration\/","title":{"rendered":"[W3Conf] Ariya Hidayat: “Fluid User Interface with Hardware Acceleration”"},"content":{"rendered":"
\n

Ariya Hidayat (@ariyahidayat<\/a>) works at Sencha<\/a> and created PhantomJS<\/a> and Esprima<\/a>. He talked about front end web performance.<\/p>\n

<\/p>\n

These are my notes from his presentation at W3Conf<\/a> in San Francisco as part of this live blog series<\/a>.<\/p>\n<\/div>\n

Oversimplified advice: “Use translate3d for hardware acceleration.”<\/p>\n

Browsers are complicated: User Interface – Browser Engine – Render Engine – Graphics Stack – JavaScript Engine – Networking Engine.<\/p>\n

Getting content to pixels is complicated too. Painting to the screen is only the last step in a long chain. We’re mostly familiar with the DOM Tree, but there is also a Render Tree.<\/p>\n

Style recalculations are easy (e.g. changing background color). Layout changes are more difficult and thus slower \/ “more expensive” (e.g. changing positioning of an element). There are lots of properties that change layout.<\/p>\n

This demo<\/a> (add boxes to slow down performance easily).<\/figcaption><\/figure>\n

There are varying expenses to different brushes\/fills. No fill is easy, gradients are harder, textures hardest. This concept applies to all kinds of properties. For instance CSS transforms: scaling is easier than dealing with perspective. <\/p>\n

GPU’s are optimized for games. Less-so for simple things like lines (Call of Duty<\/em> doesn’t need straight horizontal lines). The web doesn’t have predictable content (like games do). The web is mostly text. Games are mostly images. <\/p>\n

GPUs = Low memory; Lots of processing power; Data transfer is the bottleneck; Requires a good amount of power.<\/p>\n

So how do we take a GPU that is optimized for games and use it on the web? <\/p>\n

Fluid animation is a huge goal on the web. So: push as much of it to the GPU as you can. Less efficient = loop over and move a box. More efficient, put box in buffer and move buffer. Good example of this is Falling Leaves demo<\/a> by WebKit. Makes it the job of the compositor to figure out where leaves are.<\/p>\n

\n

#w3conf<\/a> @ariyahidayat<\/a>: Animation mechanics \u2192 initialization caches images, then you only manipulate the bitmaps\u2019 position etc.<\/p>\n

— Faruk Ate\u015f (@KuraFire) February 22, 2013<\/a><\/p><\/blockquote>\n

translateZ(0) <\/code>isn’t needed if you’re already using animation.<\/p>\n