Some suggestions on mobile phone side performance

Recently several friends want to transform the front-end development of mobile devices to ask me what skills are needed in this area, what is the difference between a traditional website and a mobile website?

I thought about it and decided to make an entire article about the differences between traditional web front-end development and mobile Web front-end development.

Animation effects

On traditional Web pages, we often use the jquery animate () method to animate page elements.

On the mobile side, I suggest you use the CSS3 way to achieve animation, CSS3 translation and animation animation performance compared to JS animation, animation smoother, this is more obvious on low-profile devices.

In addition to the use of CSS3 animation, you can add Transform:translate3d (0, 0, 0), this code can turn on the device itself 3D acceleration, so that the CSS animation to perform more smoothly, but also the burden of CPU, so please use as appropriate.

Page rendering

CSS3 effects such as shadows and gradients are rendered slowly, which is one of the reasons why the mobile side advocates flattening. You can't find this problem on your PC at all. However, when executed on a low-profile mobile device, it is easy to see that there are some delays in shading or gradient rendering.

Loading speed

Mobile 2G Network is slow, 3G network speed is far less than the PC's wired network, we must strictly control the page volume. Some people say WiFi is everywhere now, do not worry at all. But the reality is not as hot as we think, WiFi coverage and signal stability is not guaranteed.

The front end, which has just been transformed from the traditional web, often uses the jquery library on a mobile page, but it's hard to see that the jquery Library volume is 90k+, and this page load is a huge burden. I recommend using the Zepto library because his syntax is the same as jquery, and you can simply replace the original jquery with the Zepto library and then debug it a little bit.

Zepto Library volume of about 24k, is the jquery Library of 1/3, the benefits can be imagined.

In addition, the mobile page picture needs to be strictly compressed, the conditions allow the use of base64,svg and CSS3 Font-face can be a great help to picture compression.

I think the mobile Web page, the first load of data at least less than 50k is ideal, above the standard page, you have to think about optimization.

Computing power

Most mobile device hardware computing power is actually far inferior to the PC, which results in the processing of some large data when the entire page card, and again I developed a picture compression of the small function, in the process need to first turn the picture into Base64 format and then do the compression processing, the image after the conversion of a string of characters, Make the whole page card not, there is no way to do other operations, but the same features moved to the PC will not have any problems.

If you encounter such problems, consider using the HTML5 WORKSAPI multi-process feature.

Test

Finally, the debugging of the page, Pcweb debugging is very convenient, firefox,chrome and so on with a very powerful debugging tools, but to the mobile side does not seem to see such a powerful tool.

I recommend a debugging tool weinre and chrome debugging the same way, can help you solve the problem of mobile Web page debugging.

Ext.: http://www.vqianduan.com/459.html

Some suggestions on mobile phone side performance