Hacker News new | past | comments | ask | show | jobs | submit login

Does mobile browser DOM rendering use GPU hardware acceleration?



Yes they can. If you are interested here is how the rendering works.

The rendering happens in batches, the first render is always an expensive operation and includes both "paint" & "layout".

- The "layout"-operation recalculates the tree of visible elements.

- The "paint"-operation paints the element and is commonly done using a software rasterizer.

Every subsequent render happens if an DOM-element triggers a layout or a paint (or both). A re-paint occurs when changes are made to an elements skin that changes visibility, but do not affect its layout. Examples of this include outline, visibility, or background color.

When you use GPU-accelerated CSS properties such as opacity, translate, rotate & scale, both layout- and paint-operations are not executed. The GPU handles the changes for those properties. This is how famo.us wants to achieve its "60fps".

React by itself can cause expensive operations too if you trigger a CSS property that is not GPU-accelerated. In the process of rendering, a DOM-element can be destroyed and recreated when your state or model changes. So be vary of third-party React-components that promise "fluid" or "fast" speeds. IMO animation is still a research-topic for React. Their manual currently lists a method for basic CSS animations and transitions, but it's projects like React Canvas that make React a worthwhile contender for performant animations.

http://facebook.github.io/react/docs/animation.html

Mobile browsers are no different to Desktop browsers, almost every smartphone has a GPU of some sort. So you have 2 main-bottlenecks with every device. The first is the CPU (& RAM), the next one is the GPU (& the GPU-RAM).

What is GPU-accelerated and why:

http://www.html5rocks.com/en/tutorials/speed/high-performanc...

How Reflows and Repaints cause slow javascript:

http://www.stubbornella.org/content/2009/03/27/reflows-repai...




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: