Mobile HTML 5 Front-End performance Optimization Guide

Front-end Engineer's dish! Recently moved HTML 5 more and more fire, want to have a experience fluent HTML 5 application, this optimization guide will not let go. Tencent's students will be the key points of attention and optimization methods are summed up, the full text of high capable goods, very worthy of deep learning >>>

　　Overview

PC optimization means the same on the mobile side

On the mobile side, we present a three-second rendering to complete the first screen index.

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

Based on Unicom 3G network average 338kb/s (2.71mb/s), so the first screen resources should not exceed 1014KB

Mobile side because of cell phone configuration reasons, in addition to loading outside the rendering speed is also the focus of optimization

Based on the 5th, to properly handle the code to reduce the rendering loss

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

Performance is also required when the user interacts with the load after completion

　　[Load Optimization]

The load process is the most time-consuming process that can account for 80% of the total time spent and is therefore the focus of optimization

　　Reduce HTTP Requests

Because the mobile browser also responds to requests for 4 requests (Android supports 4, IOS 5 supports 6), you should minimize the number of requests to the page, and the number of requests for the first load cannot exceed 4.

A) merge CSS, JavaScript

b Merge Small picture, use Sprite chart

　　Cache

Using caching reduces the number of requests to the server and saves the load time, so all static resources have to be cached on the server side, and use long cache as much as possible (the time stamp is used to update the cache resource)

A to cache all the cached resources

b Use long cache (use timestamp to update cache)

c Use an external reference to CSS, JavaScript

　　Compress HTML, CSS, JavaScript

Reduce the size of the resource can speed up the Web page display speed, so you want to HTML, CSS, JavaScript and other code compression, and set up gzip on the server side.

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

b) Enable Gzip

　　No blocking

JavaScript written in the HTML header (no asynchrony), and the style written in the HTML tag, blocks the rendering of the page, so the CSS is placed on the head of the page and used in link mode to avoid writing style in HTML tags, JavaScript is placed at the tail of the page or loaded asynchronously.

　　Using the first screen load

The quick display of the first screen can greatly enhance the user's perception of the page speed, so it should be optimized for the quick display of the first screen.

　　Load on Demand

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

PS: Loading on demand can cause a lot of redraw, affecting rendering performance

A) lazyload

b) Rolling screen loading

c) loading via media query

　　Pre-loading

Large heavy resource pages (such as games) can use the method of adding loading, and then the page will be displayed after the resource loading completes. But the loading time is too long, can cause the user to lose.

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

A) perceptible loading (e.g. loading into a space game)

b Non-perceptible loading (such as loading the next page in advance)

　　Compress pictures

Picture is the most flow of resources, so try to avoid using him, choose the most appropriate format when using (to achieve the requirements of the premise, to the size of the judge), the appropriate size, and then use the map compression, while in the code with Srcset to display on demand.

PS: Excessive compression of picture size affects picture display effect

(a) Use of the map (http://zhitu.tencent.com/)

(b) Alternative use of pictures (1. Using CSS3 2. Using SVG 3. Using Iconfont)

c) Use of Srcset

D Choose the right picture (1 WEBP is better than JPG 2.) PNG8 is better than GIF)

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

　　Reduce cookies

Cookies affect the load speed, so the static resource domain name does not use cookies.

　　Avoid redirection

Redirection affects load speed, so avoid redirection when the server is properly set up.

　　Load third party resources asynchronously

Third-party resource uncontrolled affects the loading and display of pages, so Third-party resources are loaded asynchronously.

　　[Script Execution Tuning]

Improper scripting can block page loading and rendering, so you need to be aware of it when you use it:

CSS is written in the head, JavaScript is written in the tail or asynchronous.

Avoid the empty src, such as pictures and iframe, empty SRC will reload the current page, affecting speed and efficiency.

Try to avoid resetting the picture size.

Resize a picture refers to the page, CSS, JavaScript, and so on many times to reset the picture size, many times the size of the picture will cause the picture to redraw many times, affecting performance.

Picture as far as possible to avoid the use of dataurl,dataurl pictures of the compression algorithm file will be larger, and to decode and then render, loading slow time consuming long

　　[CSS Optimization]

Try to avoid writing style attributes in HTML tags

　　Avoid CSS expressions

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

　　To 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 rule.

　　Using the properties of display correctly

The display property affects the rendering of the page, so use it appropriately.

A) display:inline should not use width, height, margin, padding, and float

b) should not use float after Display:inline-block

c) Display:block should not be used after vertical-align

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

　　No abuse of float

Float has a large amount of computation during rendering, minimizing use.

　　Do not abuse web fonts

Web fonts need to download, parse, redraw the current page and minimize usage.

　　Don't declare too much font-size

Excessive font-size raises the efficiency of the CSS tree.

　　A value of 0 does not require any units

For browser compatibility and performance, do not take units when the value is 0.

　　Standardize various browser prefixes

A) The prefix should be placed at the end

b CSS Animations only use (-webkit-prefix) two can

c) Other prefixes are-webkit--moz--ms-prefix four, (-o-opera browser switch to blink kernel, so eliminated)

　　Avoid making selectors look like regular expressions

Advanced selectors are time-consuming and difficult to read and avoid using.

　　[JavaScript Execution Tuning]

　　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

　　Caching DOM selection and calculation

Every DOM selection has to be computed, caching him.

　　Cache list. length

Each time. Length is calculated, save this value with a variable

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

Use the ID selector as much as possible, and the ID selector is the fastest.

　　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 using viewport

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

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

　　Reduce DOM nodes

Too many DOM nodes affect page rendering, DOM nodes should be minimized

　　Animation optimization

A) try to use CSS3 animation

(b) Reasonable use of requestanimationframe animation instead of settimeout

C appropriate use of Canvas animation 5 elements within the use of CSS animation, more than 5 use canvas animation (iOS8 can use WebGL)

　　High Frequency event Optimization

Touchmove, Scroll events can cause multiple rendering

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

b increase the time interval for response changes, reducing the number of 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 lead to increased power consumption of mobile phones.