How to improve mobile web app performance by reducing reflow in DOM
Edit
I learned about some tricks to make a mobile web app to "look" faster. The keys are to reduce the "Cost a reflow" and to reduce the "number of reflows" in the DOM. It is about the way to write the HTML code within the DOM to reduce the "Cost a reflow" and the way to write javascript code to reduce reflow times.
Reduce the "Cost a reflow":
Reference : The Cost of Reflows on a Web App: Float Mobile Learning
Reduce the "Cost a reflow":
- use shorter html tag. Despite there are <section> or <article> tag in html5, <div> is shorter and without any class attribute attached to it, it will put less cost on reflowing a DOM.
- remove useless <a> tag. Instead of using <a> tag, you can try to use 'ontouchstart' or 'onclick' event on the <li>, <div> or <img> so that you can reduce one html element
- for simple table view, you can use <li> instead of <table> to reduce html element and shorter html code
- put attribute or class directly to the <html> or <body> element instead of making a <div> to wrap all elements within <body>
Reduce the "number of reflows":
- change all CSS of an element in javascript in one go, not making seperate javascript statement for each CSS properties, as each statement will trigger a reflow. Make use of 'element.style.cssText' to change all CSS properties at a time. Or put CSS properties in a class, so by adding or removing a class, only one reflow is triggered
- To modify an element in DOM, better use this strategy
- deep clone the element (clone all the attached event as well, reference : jQuery .clone() )
- make changes to the clone
- replace the changed clone with the original element
- Experiments shows that using the above strategy in Safari / mobile Safari is better than
- hide the element
- make the changes in the element
- show the element again
- Use Client side template engine if there is repeated html structure with dynamic data in your view.
Reference : The Cost of Reflows on a Web App: Float Mobile Learning
How to improve mobile web app performance by reducing reflow in DOM
![How to improve mobile web app performance by reducing reflow in DOM]()
Reviewed by DF
on
8:27:00 PM
Rating: