{"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":"
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