Mobile HTML5 Front End Performance optimization Guide

Overview

1. PC Optimization method is also available on the mobile side

2. On the mobile side we present 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 side due to phone configuration, in addition to load rendering speed is also an optimization focus

6. Based on 5th, reasonable handling of code to reduce rendering loss

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

8. You should also pay attention to performance when user interaction is completed after loading

Optimization Guide

[ load optimization]

The loading process is the most time-consuming process and can take up to 80% times, so it is the focus of optimization

· Reduce HTTP Requests

Because the phone browser responds to requests at the same time 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

A) merge CSS, JavaScript

b) Merging small images, using sprite chart

· 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 using long cache (the update of long cache resources can use timestamp)

A) cache all resources that can be cached

b) Use long cache (update cache with timestamp)

c) using an inline reference to CSS, JavaScript

· Compress HTML, CSS, JavaScript

Reducing the size of the resources can speed up the page display, so code compression for HTML, CSS, JavaScript, etc., and set the gzip on the server side

A) compression (for example, extra spaces, line breaks, and indents)

b) Enable Gzip

· Non-blocking

JavaScript written in the HTML header (no async), 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,javascript in the HTML tag at the end of the page

Load using asynchronous mode or asynchronously

· Loading with the first screen

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.

· Load on Demand

It will not affect the first screen of resources and the current screen resources are not used to load the user needs, can greatly improve the display speed of important resources and reduce overall traffic

PS: Loading On demand causes a lot of repainting, affecting rendering performance

A) lazyload

b) Roll-screen loading

c) loading via media query

· Pre-load

A large heavy resource page, such as a game, can be used to add loading, and the resource is loaded and the page is displayed. But the loading time is too long, will cause the user to churn

For user behavior analysis, you can load the next page of resources on the current page, increasing the speed

A) perceptible loading (such as loading entering a space game)

b) Non-perceptible loading (e.g. loading the next page in advance)

· Compress pictures

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

PS: Excessive compression of image size affects picture display effect

A) using smart maps (http://zhitu.tencent.com/)

b) Use a different alternative to the picture (1. Using CSS3 2. Using SVG 3. Using Iconfont)

c) Use of Srcset

d) Select the appropriate picture (1. WEBP is better than JPG 2. PNG8 better than GIF)

e) Select the appropriate size (1. The first load is no greater than 1014KB 2. Not wider than 640 (based on the general width of the phone screen))

· Reduce cookies

Cookies affect loading speed, so static resource domain names do not use cookies

· Avoid redirects

Redirection affects load speed, so the server is set up correctly to avoid redirection

· Loading third-party resources asynchronously

Non-controllable third-party resources affect page loading and display, so you can load third-party resources asynchronously

[ Script Execution optimization]

Improper script handling can block page loading and rendering, so you need to be careful when you use it

· CSS written in the head, JavaScript written at the tail or async

This allows the browser to first download the CSS and finish rendering the page as soon as possible.

JavaScript writing at the tail prevents JavaScript from loading and parsing execution from blocking page rendering. Because JavaScript resources default to parsing blocking, HTML DOM parsing and CSS rendering can be blocked unless they are marked as asynchronous or loaded asynchronously in other ways.

· Avoid empty src such as pictures and IFRAME

Empty src reloads the current page, affecting speed and efficiency

· Try to avoid resetting the image size

Resetting a picture size means resetting the size of a picture multiple times in a page, CSS, JavaScript, and so on, resetting the size of the picture multiple times will cause multiple redraw of the picture, affecting performance

· Picture try to avoid using Dataurl

Dataurl image compression algorithm files that do not use images will become larger, and will be decoded before rendering, loading slow and time-consuming

[CSS optimization]

· Try to avoid writing the style attribute in the HTML tag

· Avoid CSS expressions

The execution of the CSS expression needs to be rendered out of the CSS tree, so avoid CSS expressions

· Remove an empty CSS rule

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

· Correct use of Display properties

The display property affects the rendering of the page, so please use it properly

A) width, height, margin, padding, and float should not be used after display:inline

b) Float should not be used after display:inline-block

c) Vertical-align should not be used after display:block

D) You should not use margin or float after display:table-*

· No misuse of float

Float is computationally large at render time and minimizes use

· Do not misuse Web fonts

Web fonts need to download, parse, redraw the current page, minimize use

· Do not declare too many font-size

Excessive font-size triggers the efficiency of the CSS tree

· A value of 0 does not require any units

For browser compatibility and performance, do not bring units with a value of 0

· Standardize various browser prefixes

A) No prefix should be placed in the last

b) CSS animation only use (-webkit-without prefix) two kinds of

c) Other prefixes are-webkit--moz--ms-prefix four, (-o-opera browser instead of blink kernel, so obsolete)

· Avoid making selectors look like regular expressions

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

[JavaScript execution Optimizations]

· Reduced redraw and Reflow

A) Avoid unnecessary DOM operations

b) try to change class instead of style and use classlist instead of classname

c) Avoid using document.write

d) Reduction of DrawImage

· Cache Dom Selection and calculation

Every time the DOM selection is calculated, cache him

· Cache list. length

Every. Length is calculated, and a variable is used to save the value

· Use event proxies as much as possible to avoid bulk binding events

· Use the ID selector as much as possible

The ID selector is the fastest

· Touch Event Optimization

Use Touchstart, Touchend instead of click, because fast impact speed. However, it should be noted that touch response is too fast and easy to cause misoperation

[ rendering optimization]

· HTML using viewport

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

< meta name= "viewport" content= "Width=device-width, initial-scale=1″>

· Reduce DOM nodes

DOM node too much affects the rendering of the page, should try to reduce the DOM node

· Animation optimization

A) Use CSS3 animations as much as possible

b) Rational use of requestanimationframe animation instead of settimeout

c) Use canvas animations appropriately, use CSS animations within 5 elements, and more than 5 using canvas animations (iOS8 can use WebGL)

· High Frequency event Optimization

Touchmove, Scroll events can cause multiple renderings

A) use Requestanimationframe to monitor frame changes to make rendering at the right time

b) Increase the time interval for response changes and reduce redraw times

· GPU Acceleration

The following properties in CSS (CSS3 transitions, CSS3 3D transforms, 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 HTML5 Front End Performance optimization Guide