A picture to understand the front-end performance optimization of Html5

Overview

1. PC optimization methods are also applicable to the mobile side

2. On the mobile side, we proposed a target of rendering the first screen in three seconds

3. Based on the second point, the first screen loads within 3 seconds or uses Loading

4. Based on the average speed of China Unicom 3G network of 338KB/s (2.71Mb/s), the first screen resource should not exceed 1014KB

5. Due to the configuration of mobile phones, in addition to loading, rendering speed is also a key optimization point on the Mobile side.

6. Based on the fifth point, we should deal with the code reasonably to reduce rendering loss

7. Based on the second and fifth points, all codes that affect the loading and rendering of the first screen should be placed after the processing logic

8. Pay attention to performance when users interact with the application after loading

Optimization Guide

[Loading Optimization]

The loading process is the most time-consuming process, which may account for 80% of the total time, so it is the focus of optimization.

Reduce HTTP requests

Because mobile browsers can respond to 4 requests at the same time (Android supports 4, iOS 5 and later can support 6), so the number of page requests should be reduced as much as possible. The number of simultaneous requests should not exceed 4.

a) Merge CSS and JavaScript

b) Combine small images and use Sprite

· cache

Using cache can reduce the number of requests to the server and save loading time, so all static resources should be cached on the server side, and long cache should be used as much as possible (timestamps can be used to update long cache resources)

a) Cache all cacheable resources

b) Use long cache (use timestamp to update cache)

c) Use external references to CSS and JavaScript

Compress HTML, CSS, and JavaScript

Reducing resource size can speed up web page display, so you need to compress HTML, CSS, JavaScript, etc. and set GZip on the server side.

a) Compression (e.g., extra spaces, line breaks, and indentation)

b) Enable GZip

Non-blocking

JavaScript written in the HTML header (no async) and Style written in HTML tags will block the rendering of the page, so CSS is placed in the page header and introduced using Link, avoiding writing Style in HTML tags, and JavaScript is placed at the end of the page.

or use asynchronous loading

Use above-the-fold loading

The fast display of the first screen can greatly improve the user's perception of page speed, so we should try to optimize the fast display of the first screen.

Load on demand

Loading resources that do not affect the first screen and resources that are not used by the current screen resources only when the user needs them can greatly improve the display speed of important resources and reduce overall traffic.

PS: On-demand loading will cause a lot of redrawing, affecting rendering performance

a) LazyLoad

b) Scrolling loading

c) Loading via Media Query

Preloading

Large resource-heavy pages (such as games) can use the method of increasing loading, and display the page after the resources are loaded. However, if the loading time is too long, it will cause user loss.

Analyze user behavior and load the next page resources on the current page to improve the speed

a) Perceivable loading (such as loading when entering a space game)

b) Imperceptible loading (such as loading the next page in advance)

Compress images

Images are the most traffic-intensive resource, so try to avoid using them. When using them, choose the most appropriate format (based on size, on the premise of meeting the requirements), the appropriate size, and then use Zhitu compression. At the same time, use Srcset in the code to display them on demand.

PS: Excessive compression of image size affects image display effect

a) Use Zhitu (http://zhitu.tencent.com/)

b) Use other methods instead of images (1. Use CSS3 2. Use SVG 3. Use IconFont)

c) Using Srcset

d) Choose the right image (1. webP is better than JPG 2. PNG8 is better than GIF)

e) Choose a suitable size (1. *** loading no more than 1014KB 2. no wider than 640 (based on the average width of mobile phone screens))

Reduce cookies

Cookies will affect loading speed, so static resource domains do not use cookies

Avoid redirects

Redirection will affect loading speed, so set up the server correctly to avoid redirection

Asynchronous loading of third-party resources

Uncontrollable third-party resources will affect the loading and display of the page, so third-party resources should be loaded asynchronously.

[Script execution optimization]

Improper script handling will block page loading and rendering, so be careful when using it

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

Avoid empty Src for images, iFrames, etc.

Empty Src will reload the current page, affecting speed and efficiency

Avoid resizing images

Resizing an image means resetting the image size multiple times in the page, CSS, JavaScript, etc. Resizing an image multiple times will cause the image to be redrawn multiple times, affecting performance

Avoid using DataURL for images

DataURL images do not use image compression algorithms, so the file size will increase and they need to be decoded before rendering, which makes loading slow and time-consuming.

[CSS Optimization]

· Try to avoid writing Style attributes in HTML tags

Avoid CSS expressions

The execution of CSS expressions requires jumping out of the rendering of the CSS tree, so please avoid CSS expressions

Remove empty CSS rules

Empty CSS rules increase the size of the CSS file and affect the execution of the CSS tree, so empty CSS rules need to be removed

Correctly use the Display properties

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

a) After display:inline, width, height, margin, padding and float should not be used

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

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

d) Margin or float should not be used after display:table-*

Don’t abuse Float

Float requires a lot of calculations when rendering, so try to minimize its use

Don’t abuse web fonts

Web fonts need to be downloaded, parsed, and the current page needs to be redrawn. Try to minimize their use

Don’t declare too many font-sizes

Excessive font-sizes can cause inefficiency in the CSS tree

A value of 0 does not require any unit

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

Standardize various browser prefixes

a) No prefix should be placed in ***

b) For CSS animations, only two types are needed (-webkit- without prefix).

c) Other prefixes are -webkit- -moz- -ms- and no prefix (-o-Opera browser uses blink kernel instead, so it is eliminated)

Avoid making selectors look like regular expressions

Advanced selectors take a long time to execute and are difficult to understand. Avoid using them.

[JavaScript execution optimization]

Reduce repaints and reflows

a) Avoid unnecessary DOM operations

b) Try to change Class instead of Style, use classList instead of className

c) Avoid using document.write

d) Reduce drawImage

Cache Dom selection and calculation

Each time Dom selects, it must be calculated and cached

Cache list.length

.length must be calculated each time, and a variable is used to store this value

· Use event proxy as much as possible to avoid batch binding events

Use ID selectors whenever possible

ID selectors are the fastest

· TOUCH event optimization

Use touchstart and touchend instead of click, because they affect the speed quickly. But be careful that too fast Touch response may cause misoperation.

[Rendering Optimization]

HTML uses 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

Too many Dom nodes affect page rendering. Try to reduce the number of Dom nodes.

Animation optimization

a) Use CSS3 animations whenever possible

b) Reasonably use requestAnimationFrame animation instead of setTimeout

c) Use Canvas animation appropriately. Use CSS animation for less than 5 elements, and Canvas animation for more than 5 elements (WebGL can be used for iOS8)

High-frequency event optimization

Touchmove and Scroll events can cause multiple renderings

a) Use requestAnimationFrame to monitor frame changes so that rendering can be performed at the correct time

b) Increase the time interval between response changes and reduce the number of redraws

GPU acceleration

The following CSS properties (CSS3 transitions, CSS3 3D transforms, Opacity, Canvas, WebGL, Video) are used to trigger GPU rendering. Please use them properly.

PS: Excessive use will cause excessive power consumption of the phone