Mobile-H5 optimization

Learn from optimization articles

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 the 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. Also pay attention to performance when user interaction is completed after loading

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 your resources can speed up the display of your Web pages, so code compression for HTML, CSS, JavaScript, and so on, and set up gzip on the server side.

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

b) Enable Gzip

Non-blocking

JavaScript written on 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 in HTML tags, JavaScript is placed at the end of the page or loaded 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 as much as possible.

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.

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 and increase 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

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.

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))

Extended reading: The essence of enrichment! From scratch take you to the latest picture format WEBP "

Reduce cookies

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

Avoid redirects

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

Loading third-party resources asynchronously

Non-control of third-party resources affects page loading and display, so third-party resources are loaded asynchronously.

Script Execution Optimizations

Improper script handling can block page loading and rendering, so be aware of it when you use it:

CSS is written in the head, JavaScript is written at the tail or asynchronously.

Avoid empty src, such as pictures and iframe, and empty SRC will reload 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 can 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 and then rendered, 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 outside 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 usage.

Do not misuse Web fonts

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

Do not declare too many font-size

Too much 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 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 use.

JavaScript performs optimizations to reduce 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

Each 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, and the ID selector is the quickest.

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

Render optimized HTML using viewport

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

<name=content=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-H5 optimization