Mobile H5 Front End Performance optimization Guide

Description

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 tuning guidelines when user interaction is used after loading is complete

1. 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

1 · 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

* 合并CSS、JavaScript* 合并小图片，使用雪碧图

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

* 缓存一切可缓存的资源* 使用长Cache（使用时间戳更新Cache）* 使用外联式引用CSS、JavaScript

3 · 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

* 压缩（例如，多余的空格、换行符和缩进）* 启用GZip

4 · 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

* 使用首屏加载

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.

* 按需加载

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 the overall traffic PS: Load on demand will cause a lot of repainting, affecting rendering performance

* LazyLoad* 滚屏加载* 通过Media Query加载* 预加载

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 loading time is too long, will cause user churn to user behavior analysis, can load the next page of resources in the current page, improve speed

* 可感知Loading(如进入空间游戏的Loading)* 不可感知的Loading（如提前加载下一页）

5 · 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) 使用智图（ http://zhitu.isux.us/ ）* b) 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)* c) 使用Srcset* d) 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF)* e) 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））

6 · Reducing cookie cookies can affect loading speed, so static resource domain names do not use cookies

7 · Avoiding redirection redirects can affect load speed, so the server is set up correctly to avoid redirection

8 · Loading third-party resources asynchronously third-party resources are not controllable and can affect page loading and display, so third-party resources are loaded asynchronously

2. Script Execution Optimizations

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 empty src, such as pictures and IFrame, will reload the current page, affecting speed and efficiency

• Try to avoid resetting the image size resetting the picture size is to reset the size of the image multiple times in the page, CSS, JavaScript, and so on, resetting the size of the picture multiple times will cause the picture to be redrawn multiple times, affecting performance

• Picture try to avoid using Dataurl dataurl image compression algorithm files that do not use pictures will become larger, and will be decoded and then rendered, loading slow and time-consuming

3. CSS Optimization

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

• Avoid CSS expression CSS expression execution need to jump out of the CSS tree rendering, so avoid the CSS expression

• Remove 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

• Correct use of Display properties

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

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

display:inline-block后不应该再使用float* display:block后不应该再使用vertical-align* display:table-*后不应该再使用margin或者float

• Do not misuse float float when rendering a large amount of calculation, minimize the use

• Do not misuse Web fonts Web fonts need to download, parse, redraw the current page, minimize the use of

• Does not declare too much font-size too much font-size to raise the efficiency of the CSS tree

• A value of 0 does not require any units for browser compatibility and performance, with a value of 0 without units

• Standardize various browser prefixes

• • No prefix should be placed at the end
  • CSS animations can only be used (-webkit-without prefix) two kinds of
  • Other prefixes are-webkit--moz--ms-prefix four, (-o-opera browser instead of blink kernel, so obsolete)

• Avoid making selectors look like regular expressions The advanced selector is time-consuming and difficult to read, and avoids using

4.JavaScript Execution Optimization

• Reduced redraw and Reflow

  • Avoid unnecessary DOM operations
  • Change class instead of style and use classlist instead of classname
  • Avoid using document.write
  • Reduce DrawImage

• Cache DOM selection and compute each DOM selection to be computed, caches his

• Cache list. length every time. Length is calculated, and a variable is used to save this value

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

• Try to use the ID Selector ID selector is the fastest

• Touch Event Optimizer uses Touchstart, touchend instead of click, because it quickly affects speed. However, it should be noted that touch response is too fast and easy to cause misoperation

5. Rendering optimization

1 · HTML uses viewport viewport to speed up the rendering of the page, use the following code

name="viewport" content="width=device-width, initial-scale=1">

2 · Reduce DOM node DOM nodes too much impact on page rendering, should minimize DOM nodes

3 · Animation optimization a) use CSS3 animation B) Reasonable use of requestanimationframe animation instead of settimeout c) Use canvas animations appropriately using CSS animations within 5 elements, More than 5 use canvas animations (iOS8 can use WebGL)

4 · High-frequency event optimization Touchmove, Scroll events can cause multiple rendering a) use Requestanimationframe to monitor frame changes to render at the correct time B) increase the time interval for response changes and reduce redraw times

5 · GPU-accelerated GPU rendering with the following properties (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) in CSS, use it wisely

PS: The use of the transition will cause mobile phone over-consumption increased

6. Improve website performance from server considerations

1. Use CDN acceleration to allow users to download files from their nearest server;
2. Reduce the size of cookies, the use of non-cookie domain, when the client requests static files, reduce the repeated transmission of cookies to the primary domain name impact;
3. Specify expires for the file header, so that the content is cached;

• Front-End optimization: DNS pre-parsing improves page speed
  • Most new browsers are now optimized for DNS resolution, and a typical DNS resolution takes 20-120 milliseconds, reducing the time and frequency of DNS resolution is a good way to optimize. DNS prefetching is the domain name that has this attribute does not need the user clicks the link to parse in the background, but the domain name resolution and the content loading is the serial network operation, therefore this way can reduce the user's wait time, enhances the user experience.

<link rel="dns-prefetch" href="http：//hm.baidu.com" /><link rel="dns-prefetch" href="http：//eiv.baidu.com" />

• Server-side work: Load balancing, distributed storage, improved server performance, and more.

Reprinted from: https://isux.tencent.com/h5-performance.html

added from the source: consider improving website performance from the server

Mobile H5 Front End Performance optimization Guide