Front-end Performance tuning Guide (with Mobile)

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

· 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

Front-end Performance tuning Guide (with Mobile)