Mobile-H5 optimization

See the original: https://zhuanlan.zhihu.com/p/25176904

How to optimize the performance of HTML5 in Mobile settings, the first need to clear the following several principles:

1, PC optimization means on the mobile side is also applicable.

2, on the mobile side we put forward three seconds of rendering complete the first screen indicator.

3, based on the 2nd, the first screen load 3 seconds to complete or use loading.

4, based on China Unicom 3G Network average 338kb/s (2.71mb/s), so the first screen resources should not exceed 1014KB.

5, mobile terminal because of mobile phone configuration reasons, in addition to load rendering speed is also the focus of optimization.

6, based on the 5th, to reasonably deal with the code to reduce rendering loss.

7, based on the second and 5th, all the code that affects the first screen loading and rendering should be placed in the processing logic.

8. After loading, users should pay attention to the performance when they interact with each other.

Next, look at a small copy of the Divine figure:

The reason is that it is a divine figure because it basically covers all the optimization schemes! Very detailed! Here, we discuss several of these representative scenarios:

Load optimization

For mobile Web pages, the loading process is the most time-consuming process, which may take up 80% of the time, so it is the focus of optimization, of course, the other front-end elements of the mobile station optimization can not be ignored.

1. Reduce HTTP Requests

Because the phone browser in response to the request is 4 requests (Android support 4, IOS 5 can support 6), so to minimize the number of page requests, the first load of simultaneous requests can not exceed 4, the recommended optimization points for the following 2 points:

1. Merge CSS, Java

2. Merging small pictures, using Sprite chart

2. Cache

Using caching can reduce the number of requests to the server and save load time, so all static resources are set up on the server side, and as far as possible use long cache (the time stamp is used for updates of long cache resources).

1. Cache all resources that can be cached

2. Use long cache (update cache with timestamp)

3, using an external reference CSS, Java

3. Compress HTML, CSS, Java

Reducing the resource size can speed up the page display, so code compression for HTML, CSS, Java, etc., and gzip on the server side.

1. Compression (for example, extra spaces, line breaks, and indents)

2. Enable gzip

4, non-blocking

Java (no async) written in the HTML header, and the style written in the HTML tag block the rendering of the page, so the CSS is placed on the page header and introduced using link, to avoid writing Style,java in the HTML tag or loading it asynchronously.

5. Use the first screen to load

The fast display of the first screen can greatly improve the user's perception of the speed of the page, so it should be optimized for the quick display of the first screen as much as possible.

6. Load on Demand

The resources that do not affect the first screen and the resources used by the current screen resources are loaded when the user needs them, which can greatly improve the display speed of important resources and reduce the overall traffic.

1, Lazyload

2, Rolling screen loading

3. Loading via Media query

Also, let's remind you that loading on demand can cause a lot of repainting, affecting rendering performance.

7. Pre-loading

Large heavy resources pages (such as games) can be used to increase the loading method, the resource load is completed and then display the page, but the loading time is too long, will cause user churn.

1, can sense loading (such as Enter the space game loading)

2, imperceptible loading (such as loading the next page in advance)

3, the user behavior analysis, you can load the next page of resources in the current page, improve speed.

8. Compress Pictures

The picture is the most traffic resource, so try to avoid using him, when using the most appropriate format (to achieve the premise of the requirements, size judgment), the appropriate size, and then use the smart image compression, and in the code with Srcset to display on demand.

1. Use of Smart maps

2. Use other methods instead of pictures (use CSS3; use SVG; use Iconfont)

3. Using Srcset

4. Choose the right picture (webp better than Jpg;png8 gif)

5, choose the appropriate size (first load not more than 1014KB; Based on the phone screen general width is not wider than 640)

Remind everyone: Excessive compression of the image size affects the image display effect.

9. Reduce cookies, avoid redirects, and load third-party resources asynchronously

Cookies affect loading speed, so static resource domain names do not use cookies. Additionally, redirection affects the load speed, so the server is set up correctly to avoid redirection. Also, third-party resources that are not controllable can affect page loading and display, so third-party resources are loaded asynchronously.

Script Execution Optimizations

Improper script handling can block page loading and rendering, so there are a few things to keep in mind when using it:

1, CSS written in the head, Java written in the tail or asynchronous.

2, avoid images and IFRAME, such as empty src, empty src will reload the current page, affecting speed and efficiency.

3, try to avoid resetting the image size, resetting the image size refers to the page, CSS, Java, etc. to reset the size of the picture multiple times, resetting the image multiple times will cause the picture to redraw multiple times, affecting performance.

4, picture as far as possible to avoid the use of Dataurl,dataurl pictures without using the image compression algorithm file will become larger, and to decode and then render, loading slow time-consuming.

CSS optimization

1. Try to avoid writing the style attribute in the HTML tag.

2, avoid the CSS expression, the execution of the CSS expression needs to jump out of the CSS tree rendering, so please avoid the CSS expression.

3, remove the empty CSS rules, empty CSS rules increase the size of the CSS file, and affect the execution of the CSS tree, so you need to remove the empty CSS rules.

4, the correct use of display properties, display properties will affect the rendering of the page, it is recommended that the webmaster to reasonable use.

(1), Display:inline should not use width, height, margin, padding and float

(2), Display:inline-block should not use float after

(3), Display:block should not be used after vertical-align

(4), after display:table-* should not use the margin or float

5, do not misuse float,float in the rendering of a large amount of calculation, to minimize the use.

6, do not misuse the Web fonts, Web fonts need to download, parse, redraw the current page, minimize the use.

7, do not declare too much font-size, too much font-size to trigger the efficiency of the CSS tree.

8, the value of 0 does not require any units, for browser compatibility and performance, the value is 0 do not bring units.

9. Standardize various browser prefixes

(1), no prefix should be put in the last.

(2), CSS animation only use (-webkit-without prefix) two can.

(3), the other prefix is "-webkit--moz--ms-no prefix" Four kinds (-o-opera browser instead of blink kernel, so obsolete).

10. Avoid making selectors look like regular expressions.

Advanced selector execution takes a long time and is difficult to read and avoids use.

Java Execution Optimizations

1. Reduce repainting and reflow

(1), avoid unnecessary DOM operations

(2), try to change class instead of style, use classlist instead of classname

(3) Avoid the use of document.write

(4), reduce drawimage

2, cache Dom selection and calculation, each DOM selection to calculate, cache him.

3. Cache list. length, each time. Length is calculated, and a variable is used to save the value.

4. Use event proxies as much as possible to avoid bulk binding events.

5, try to use the ID selector, the ID selector is the fastest.

6, Touch event optimization, use Touchstart, touchend instead of click, because fast impact speed, but should pay attention to touch response too fast, easy to trigger misoperation.

Rendering optimization

HTML documents are transmitted across the network in a way that contains the document's encoded information, and the page's encoded information is generally indicated in the header of the HTTP response or in the HTML markup within the document, and the client browser can render the page correctly only after the page encoding has been determined. So before drawing a page or executing any Java code, most browsers (except IE6, IE7, IE8) buffer Some bytes of data to find the encoded information, and the number of bytes pre-buffered in different browsers is not the same.

1, HTML use viewport

Viewport can speed up the rendering of the page, use the following code:

2. Reduce DOM nodes

Too many DOM nodes affect the rendering of the page, and you should minimize the DOM nodes.

3. Animation optimization

(1), try to use CSS3 animation.

(2), reasonable use requestanimationframe animation instead of settimeout.

(3), appropriate use of Canvas animation 5 elements within the use of CSS animation, more than 5 using canvas animation (IOS8 can use WebGL).

4, high-frequency event optimization

Touchmove, scroll events can cause multiple renderings.

(1), using requestanimationframe monitoring frame changes, so that at the right time to render.

(2), increase the time interval of response change, reduce the number of redraw.

5. GPU Acceleration

The following properties in CSS (CSS3 transitions, CSS3 3Dtransforms, Opacity, Canvas, WebGL, Video) to trigger GPU rendering, please use it properly. (PS: The use of the transition will cause mobile phone over-consumption increased.) ）

Mobile-H5 optimization