Html5 mobile app performance optimization, html5 mobile app

Html5 mobile app performance optimization, html5 mobile app

Prospect: I have been studying html5 mobile development recently. I have found a lot of materials and made many pages. However, as a programmer, it is not as professional as the front-end attacking lions, hitting the wall everywhere, thinking all kinds of methods and trying to get drunk in the end. The biggest problem is the card. The worse the device is, the more obvious the effect is. To this end, I am racking my brains and crawling on google all day long.

In the past, iscroll was used for better experience, and masnory was used for simple waterfall flow layout. Later, I found that the animation written with jquery always felt like a frame jumping, and iscroll became more and more stuck. The original smooth development path has gradually become rather bumpy. As a result, I have gone through a lot of materials, made many experiments, and made a small summary.

1. Pay attention to absolute positioning. The position of an absolutely positioned element needs to be calculated when the browser draws a page, so it is quite impressive in some special cases. For example, use masonry for waterfall stream layout. Masonry uses absolute positioning of elements in the layout. Once there are too many page elements, the page will become increasingly stuck.

2. Use CSS3 for animation. For example, if you specify a margin value for an element to achieve element displacement, changing the element margin will cause the page to re-render part or the whole page. You can use transform instead of margin.

3. Enable hardware acceleration for animation elements. If you use the Code Description: transfrom: translateZ (0 ). In this way, some browsers use GPU to render this element. To be honest, this feeling is not particularly deep.

4. Image Size Control. This should be the most pitfall, and the effect is also the most obvious. The same page, different data, and different effects. It took a long time to climb out of this pit. The image size control here mainly refers to the image size. The main reason is that when the browser renders the page, if no image size is specified, or if the specified size does not meet the actual size of the image, once the image is downloaded, the browser will need to reflows and redraw the page. If the image is in a long list, it means that the entire list needs to be re-painted every time an image is downloaded. Specify the image size in css to facilitate browser rendering (you can simply fill in the box first .), The specified size should be consistent with the image size. Of course, in addition to the size, the image stream size (the number of kb in the image) should also be controlled as much as possible. Because of memory consumption, the image will be stuck when it is too large.

 

Conclusion: we hope that major mobile phone manufacturers can further improve the performance of mobile phone hardware and major system manufacturers can further improve the system performance. In this way, we will not have to make any effort in the near future.