Mobile Front End Series-Mobile page performance optimization.

With the development of mobile Internet, we should pay more attention to the performance optimization of mobile page, today we talk about this matter.

First, why optimize for the most mobile pages?

Throughout the current mobile network,

The mobile page layout is more and more complex, the effect is more and more dazzling, directly resulting in a larger file, download and running speed is getting lower, and low speed will cause adverse effects, according to statistics:

71% of users expect the mobile page to be as fast as the PC page, and 74% of the user can tolerate a response time of 5 seconds, so we must ensure that the mobile page has enough speed.

The speed of the mobile page is related to three factors, namely: mobile network bandwidth speed, device performance (CPU,GPU, browser), the page itself.

The current mainstream mobile network format is 3g

This year, we also saw the 4g network format in a rapid development, which once again increased the speed of the mobile page loading;

The mobile device itself, up to now, to Iphong6 Samsung Note4 and other devices, smart devices have become larger than ever, CPU, GPU, memory more reliable

And at the same time, browser manufacturers also to improve the speed of the page made an indelible effort, here you can watch a video (http://www.iqiyi.com/w_19rsgfld99.html)

Network format supplier, handset maker, browser producer so to the force, we? What we can do.

What we can do is to optimize the mobile page itself, which is also the embodiment of our professional value, so we have to do mobile page performance optimization.

How to do the mobile page optimization?

Before saying this, we should mention the most commonly used optimization methods of PC:

Code optimization (CSS, HTML, JS optimization)

Reduce HTTP requests (sprite chart, file merge …)

Reduce DOM nodes

Non-blocking (inline Css,js …)

Cache

...

Most of these tools apply to mobile, and this is a familiar way to talk about it here today, interested in the PDI course "website performance optimization".

Today to talk about some of the most suitable for mobile optimization means, now get to the point.

First of all, we have to look at what stage a page needs to go from start to finish, with four phases:

The main work for each phase is shown, while our optimization objectives are:

Let's take a look at some of the optimizations that are available for the above stages.

First, take a look at what optimizations are available in the load:

1. Pre-loading

There are two ways of preloading:

A. Explicit loading

Similar to this user can obviously perceive, I call it “ explicit loading &rdquo, interactive pages are recommended to add this mode of loading, it can increase the interest of the page, on the other hand can make the subsequent page experience smoother

B. Implicit loading

This is loaded in the first picture when the second picture has been preloaded, so that the page experience more fluent way, I call it implicit loading, the advantage of this way is to save traffic and can make the experience enhanced.

2. Load on Demand

On-demand loading is an indispensable optimization method, mainly in the following two ways:

In this way, the first screen loading when the content of the first screen to load as far as possible, and the first screen outside of the elements are only loaded on the first screen, to a large extent, saving the traffic, increased the first load time.

This is called the response mode of loading, meaning that the use of JS or CSS to determine the resolution, so that the selection of different sizes of images to introduce, the benefits are obvious, the same can speed up the loading speed and save traffic.

3. Compress pictures

For compressed images, the first thing to mention is a JPG file:

For the JPG file on the mobile side, there is this conclusion:

A. Using JPG with large size and large lossy compression ratio

B. Lossless compression with Jpegtran

For PNG, you have the following conclusions:

A. Multi-color images using PNG24

B. Low-color images using PNG8

C. Recommended use of Pngquant

4. Avoid redirects as much as possible

Why try to avoid redirection? Because

This is a test result under the same speed, redirect is slow because it repeats the domain lookup, TCP link, send the request.

5. Use other methods instead of pictures

There are two ways, the first is: rely on CSS3 to draw pictures

Second: Use Iconfont instead of pictures

But Iconfont is not necessarily better than pictures, here's an experiment:

For large pictures, Iconfont is not better than Sprite, it is recommended to use Iconfont for small size icons on one side.

Then, there are only two points to make for the optimization of script execution:

1. Try to avoid Datauri

Datauri is not as popular on the mobile side as it is on the PC, because:

After testing, Datauri is 6 times times slower than simple external chain resources, generated code files relative to the picture file volume does not decrease but increase, and the browser in this base64 decoding process needs to consume memory and CPU, this on the mobile side of the disadvantage is particularly obvious.

2. Click event Optimizer

On the mobile side, use events such as Touchstart,touchend,touch to replace the larger-latency click event. Click is slow because of the MouseDown result:

Then, there are only two points to make for the optimization of the rendering phase:

1. Animation optimization

A) Use CSS3 animations as much as possible

Advantages:

Does not occupy JS main thread

Available with hardware acceleration

The browser can be optimized for animations

Disadvantages:

Intermediate state Monitoring not supported

b) Use canvas animations appropriately

Advantages:

Faster calculation rendering that avoids rendering trees

Disadvantages:

High cost of development

Maintenance more Troublesome

By comparing CSS3 animations with canvas animations:

Get a conclusion: use CSS3 animations within 5 elements and use canvas animations for more than 5.

c) Reasonable use of the RAF (Requestanimationframe)

Advantages:

Can solve the script problem caused by the drop frame, lag problem

Support for intermediate State monitoring

Disadvantages:

Compatibility issues

Compare the RAF animations with settimeout animations:

Conclusion: If you do not need an Android 4.3 browser, use the RAF to make script animations

2. High-frequency event optimization

Events such as Touchmove,scroll can lead to multiple renderings, which can be optimized by the following means:

1. Use Requestanimationframe to monitor frame changes to make the rendering at the right time

2. Increase the time interval for response changes and reduce the number of redraws.

Finally, only one optimization method is proposed for compositing/plotting:

GPU Acceleration

The ways to trigger GPU acceleration are:

CSS3 transitions

CSS3 3D transforms

WebGL 3D Drawing

Video

...

Compare experiments before using GPU acceleration:

GPU acceleration actually drastically reduces the composition/drawing time, which greatly improves page speed, but GPU acceleration has its drawbacks:

The overhead of excessive GPU layers is mainly due to the fact that using GPU acceleration is actually leveraging the GPU layer's cache, so that the rendering resources can be reused, so that once the layers are large, the cache increases, which can cause other performance problems.

Summarize

This paper puts forward a typical optimization method for the four stages of page rendering, and finally, reminds readers: in fact, optimization is a double-edged sword.

Load lift speed on demand, but may result in a lot of repainting;

Touch response is fast, but many scenarios do not fit;

GPU acceleration is efficient, but memory overhead is high, and so on

Loading will make the overall experience smooth, but easy to cause user churn

Image compression reduces bandwidth costs, but may cause visual effects to become worse

There are a lot of contradictions like this, please combine the business according to the actual situation to optimize.

Mobile Front End Series-Mobile page performance optimization.