With the increasing popularity of mobile browsing, it has become expected of us web developers to build some sort of responsiveness into our projects. From personal experience, the majority of sites I visit on my mobile device do have some responsive design elements, however the experience is often still lacking due to poor performance. Site performance is a broad topic and can be affected by a lot of areas, but I will focus on some simple line items you can use to increase the rendering performance of an application.
Understanding our Goals:
As it is common for modern phones to have a 60Hz refresh rate (the screen refreshes 60 times per second), it would make sense for developers to try to match this. To do so, our web application UI needs to run at 60 frames per second. Doing some quick math, this means we only have 16ms to complete the entire rendering pipeline to display our frame. In reality though, since we need to account for other browser processes, it is more common for UI developers to shoot for 10ms.
The Rendering Pipeline:
I won’t go into too much detail on the specifics of the pipeline here, as there are some fantastic resources already on the web that I have linked to below. For our purposes, I’ll run through a quick example of how the pipeline works:
In this example:
- A user clicks on a button that causes an information section to appear.
- The information sections is already in the DOM with height 0.
- Displaying the section will transition the height to 100px.
Thus, the rendering pipeline would look like this:
- Style: Changing the height property causes the browser to recalculate the styles of the current element and all other affected elements.
- Layout: Updated styles are used to determine the layout of the page (where the DOM elements are located on the screen).
- Paint: Once layout is determined the browser will fill in the pixels of the screen.
- Composite: Finally, the browser will combine any layers into a single display.
How to optimize the pipeline:
This is a lot of work to do in 10ms, especially in underpowered mobile browsers. Luckily, not all styles are created equal and while change, style and composite are always required, layout and painting can be avoided depending on which style is modified. In general, avoiding the paint step is our goal since this is the most process intensive.
When performing animations or transitions, the styles you want to focus on are opacity and transform. Both of these styles completely avoid both layout and paint, and by using them you can control location, size, rotation and visibility of an element.
Rendering performance is a small subset of things you must consider with mobile web performance but should certainly not be overlooked when optimizing your web applications. What I’ve covered above, barely even scratches the surface of dealing with the rendering pipeline and the amount of ways it can be optimized. With that said, the awareness of which styles will affect which parts of the pipeline, and using the least expensive styles when appropriate, is a simple and effective way to increase web application performance. The less interaction you have with the pipeline, the better chance you have of completing your change in your 10ms timeframe.
For more details about the pipeline and lists of what styles affect what parts of the pipeline, check out the links below. I also recommend the Udacity course on Rendering Performance.
Udacity Course Info: https://www.udacity.com/course/browser-rendering-optimization--ud860