HTML5 Mobile Application Performance optimization

Prospect Description: Recently has been learning HTML5 mobile development, find a lot of information, do a lot of pages. But as a procedural ape, no front-end siege lion as professional, everywhere, think of various methods, experience a variety of attempts, the ultimate effect of their own can see drunk. One of the biggest problems is the card. This card sub-device, the worse the effect of the more obvious. To this end, racked his brains, all day crawling on Google.

Previously, in order to experience better, with Iscroll, in order to simply complete the waterfall flow layout, with the masnory. Later found in jquery writing animation always feel a frame of the jump, Iscroll more with the card. The original smooth development road gradually become extremely bumpy. So also turned over a lot of information, did a lot of experiments, to do a small summary.

1, pay attention to absolute positioning. Because an absolutely positioned element needs to calculate its position when the page is drawn by the browser, there is a noticeable impression in some special cases. such as using masonry for waterfall flow layout. Masonry uses the absolute positioning of elements in the layout. Once the page elements are too large, the page becomes more and more jammed.

2, the use of CSS3 for animation implementation. If you specify a margin value for an element to implement an element displacement, changing the margin of an element causes the page to render part or the entire page again. The corresponding can use transform instead of margin.

3. Enable hardware acceleration for animation elements. If in code description: Transfrom:translatez (0). This allows some browsers to render this element using the GPU. The feeling is not particularly deep.

4, picture size control. This should be the most pit, the effect is the most obvious. The same page, different data, different effects. It took me a long time to climb out of this hole. Here says the picture size control, mainly refers to the picture size. The main reason for the card is that when the browser renders the page without the specified picture size, or if the specified size does not match the actual size of the picture , the browser will need to reflows and redraw the page once the picture is downloaded. And if the picture is in a long list, it means that the entire list will need to be redrawn every time a picture is downloaded. Specify the size of the image in the CSS to help the browser render (Draw the box first, you can fill the egg directly.) ), and the specified size corresponds to the size of the image as much as possible. of course, in addition to the size, picture stream size (picture how many kb) should also try to control, because the memory consumption of the reason, the picture will be too large card.

Conclusion: I hope that the major mobile phone manufacturers to further improve the performance of mobile phone hardware, hope that the major system manufacturers can further improve system performance. This will not need to be so frustrating in the near future.

HTML5 Mobile Application Performance optimization