Common Web front-end performance optimizations

One

Semantic HTML: The advantage of semantic HTML is that it can make the code concise and clear, support different devices, facilitate search engines, and facilitate team development;

Reduce DOM nodes: accelerate page rendering;

Add the correct width and height value to the picture: This can reduce the page redraw, while preventing the image from zooming;

Prevents the SRC attribute and Link's href property from being empty: When the value is empty, the browser is likely to load the current page as its property values;

Correct closing tag: If you avoid using <DIV/>, the browser will parse it into the <div\></div\> process;

Link to the directory or the first page of the address after adding "/", such as http://www.baidu.com/;

Use link instead of @import to import the style;

The style is placed on the page header, JS at the end of the page;

Two

Avoid using CSS Expressions (CSS expressions): such as Background-color:expression (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00 ″);

Avoid using CSS filter (CSS filters);

Use CSS abbreviations to reduce the amount of code;

by csssprites the same picture, reduce the picture request;

Reduce the query hierarchy: like. header. logo is better than. header. Top logo;

Reduce the range of queries: like. Header>li to be better. Header Li;

Avoid the tag tag and class or ID coexistence: such as a.top, Button#submit;

Delete duplicate CSS;

Three

Use global variables as little as possible;

Use the event Broker to bind events, such as binding events to the body for proxy;

Avoid frequent manipulation of DOM nodes;

Do not use eval;

Reducing object lookups, such as A.B.C.D, is a very expensive way to find and define it in variables as much as possible.

Type conversions: Convert numbers to Strings using "" + 1, floating-point numbers converted to integers using Math.floor () or Math.Round ();

Avoid looping through strings, such as replacing, finding, and using regular expressions;

Delete the duplicate JS;

Four

Try to merge CSS, JS files, or write them directly on the page, reducing the HTTP request;

Compress css, JS files, shorten the file transfer time; avoid 404 error: In particular, to avoid assigning a lockout page to 404, or all 404 errors will be loaded once the page;

General requirements to reduce the number of DNS queries, like a page of request resources to use a different host name, which can reduce the number of concurrent download site, but many sites in order to speed up the download of resources in fact is deliberately used more than a host name, here to do a trade-off;

Use CDN acceleration to allow users to download files from their nearest server;

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;

Specify expires for the file header, so that the content is cached;

Compress content using Gzip;

Optimizations for loading:

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) to merge small images, using sprite (CSS SPRITE);

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 use long cache (the time stamp is used for updates of long cache resources).

A) cache all cacheable resources; b) use long cache (update cache with timestamp); c) Use an external 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;

ensure no 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

Use the first screen to load .

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 that are not used by the current screen resources are loaded when the user needs them, which can greatly increase the display speed of important resources and reduce the overall traffic (PS: Loading on demand can cause 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, increase the speed, a) can perceive loading (such as entering the space game loading); b) an imperceptible loading (such as loading the next page in advance);

compress the picture .

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 the image size affects the image display effect).

A) Use of smart maps (sprite chart);

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, avoid redirects, and load third-party resources asynchronously .

Cookies affect loading speed, so static resource domain names do not use cookies. Additionally, redirection affects the load speed, so the server is set up correctly to avoid redirection. Finally, the non-control of third-party resources affects the loading and display of pages, 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.

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 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 Optimizations:

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

· Proper use of the display properties of the display property will affect the rendering of the page, so use a properly (a) Display:inline should not use the width, height, margin, padding, and FLOATB) display: Inline-block should not be used after FLOATC) Display:block should not be used after vertical-alignd) display:table-* should not use the margin or float

· Do not abuse float.

Float is computationally large at render time and minimizes use

· Web fonts are not abused.

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:

• Reduce repainting and reflow .

A) Avoid unnecessary DOM operations

b) try to change class instead of style and use classlist instead of classname

For document.getElementById ("mydiv"). Classlist.add ("mystyle"); D iv Element Add Class

c) Avoid using document.write

d) Reduction of DrawImage

var C=document.getelementbyid ("MyCanvas");

var Ctx=c.getcontext ("2d");

var Img=document.getelementbyid ("Scream");

Img.onload = function () {

Draw a picture onto the canvas

Ctx.drawimage (img,10,10);

}

· Cache Dom selection and calculation.

Each time the DOM selection is evaluated, it is cached

· 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 uses viewport.

Viewport can accelerate the rendering of the page, use the following code <meta name= "viewport" content= "Width=device-width, initial-scale=1″>

· reduce the DOM node .

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) Use Requestanimationframe animations appropriately instead of SETTIMEOUTC) use CSS animations within 5 elements of canvas animations, use canvas animations more than 5 (IOS8 can use WebGL)

· High-frequency event optimization .

Touchmove, Scroll events can cause multiple render a) use Requestanimationframe to listen for frame changes to render at the correct 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 (PS: The use of the transition will cause the phone to increase the power consumption)

Common Web front-end performance optimizations