Index of front-end performance optimization solutions and index of Performance Optimization Solutions

Index of front-end performance optimization solutions and index of Performance Optimization Solutions

Author: HaoyCn

Web: http://segmentfault.com/a/1190000003821219

Sort out and constantly update the optimization solutions for front-end performance on the network.

Here is just an overall generalized index. Every solution is worth further consideration.

1. Request and response

Cache Control

In the request header, you can send information such as If-Modified-Since and If-None-Match to check whether the content of the request is updated. If no update is made, 304 is returned, tell the browser to use the cache to avoid re-downloading resources. Pragma and Cache-Control can also Control the Cache. For example, tell the server not to cache data.

In the response header, Expires can tell the browser expiration time, Last-Modified Latest Update Time, And ETag can allow the browser to perform cache verification (used in If-None-Match request information ).

Reuse TCP

In the request header, Connection can control the use of TCP channels, and keep-alive can be used to reuse the TCP opened last time.

GZIP Compression

If gzip compression is enabled, the response data size is reduced and the response is accelerated. In the request header, you can use Accept-Encoding to inform the browser of the supported compression method, while the server uses Content-Encoding as a response.

Cookies

When sending a request, cookies are also in the request. Therefore, cookies can also be used as optimization objects to reduce requests. For example, you can use multiple domain names to load resources based on the same-source restriction policy. If you Load Static resources, no excess cookies will be sent. At the same time, you can properly set the path and domain name of cookies, avoid unnecessary cookies from the parent site on the Child site.

Reduce HTTP requests

There are many details that can be implemented, such as CSS Sprites and Data URL. Because this part of content is duplicated with the following content, some details will be discussed below.

Multi-domain Distribution

In the same domain, the browser can have limited concurrent requests. In order to increase concurrency, especially for some static resources, multiple domain names can be used. However, because domain name DNS resolution is time-consuming, the practice principle is 2-4.

Note that there is no problem with concurrency when loading image resources. However, when loading JavaScript scripts, other resources are paused.

Use CDN

Accelerate access based on the fastest possible location for user access.

Avoid redirection and 404

Redirection and 404 will waste loading requests.

Favicon. ico

The resources loaded by the browser by default are better cached.

2 HTML

Reduce DOM

Too many DOM elements affect rendering, loading, and execution. In addition to streamlining the Page Structure, you can also delete unnecessary DOM elements (elements that are no longer accessible in the page) in a timely manner, or you can load them (elements that may not necessarily be used, such as the logon box ).

CSS and JavaScript file location

CSS is placed in the head, JavaScript is placed before the body is closed. It is because:

• Style sheets do not participate in DOM modification, so document Parsing is not stopped for parsing styles

• To avoid re-painting, the browser does not start rendering until all the styles are obtained.

• When parsing styles, Some browsers (FF) will stop the script running, while some (Webkit) will stop the script running when the script accesses the style attributes but may be affected by the style not loaded.

• The request style may be in script parsing. If the style has not been parsed, an error will occur.

• Script Execution will suspend document parsing and resource download

Therefore, placing the two in a proper position can greatly improve rendering efficiency.

Script delayed Loading

Add the defer and async attributes to the script. The two attributes share the following characteristics: Script Loading and File Parsing are performed simultaneously, but the difference is that async stops file parsing and executes the script once the file is loaded; defer wait until the file is parsed.

Rational use of inline

For scripts and styles, select inline or external links as needed. For pages with fewer accesses, styles, and less reuse of scripts, you can consider using inline styles to reduce HTTP requests. However, if pages are frequently accessed and style scripts are frequently used on multiple pages, external links are the best choice.

In any case, avoid using @ import to import styles.

The same is true for images. Advanced browsers support base64 encoding of image data in the src attribute. If necessary, they can directly output image data in HTML.

Reduce iframe

Iframe has many advantages, such as the ability to download scripts in parallel, suitable for loading slow content (such as advertising), while the browser can perform security control on it.

The main consideration for reducing the use of iframe is that iframe will block page loading without semantics.

3 CSS

Selector

Selector efficiency ranking:

• ID Selector

• Class Selector

• Tag Selector

• Adjacent Selector

• Child Selector

• Descendant Selector

• Wildcard Selector

• Attribute Selector

• Pseudo-class selector

Efficiency and priority are not equivalent, but they are not necessarily more efficient. For example, the combination of # id. class has a higher priority than that of a single # id, but the efficiency is slow.

It is recommended to write selector:

• Avoid using wildcards

• Do not use the tag name or class name to modify the ID rule: if the rule uses the ID selector as the key selector, do not add the tag name to the rule. Because the ID itself is unique, adding a tag name may not significantly reduce the matching efficiency.

• Do not use the label name to modify the class: the class is more unique than the label.

• Try to select the most specific method: the simplest and most crude cause of inefficiency is to use too many rules on tags. Adding a class to the element can be subdivided into the class method more quickly, reducing the time for the rule to match tags.

• Concerning the descendant selector and sub-selector: Do not use the descendant selector. We recommend that you use the sub-Selector instead of the sub-Selector if you have to use it. But the sub-Selector should also be used with caution. The tag rule should never contain the sub-selector.

• Exploitation of inheritance: there is no need to declare styles in general content

Avoid filters, expressions, and Hack

Low efficiency.

Sprites

Merging images can reduce HTTP requests. Other suggestions include:

1. Horizontal Picture Arrangement in Sprite, vertical arrangement will increase the file size

2. The combination of closer colors in Sprite can reduce the number of colors, ideally less than 256 colors for PNG8 format

3. Do not leave a large gap between Spirite images. Although this will not increase the file size, it requires less memory for the user agent to decompress the image into a pixel map. 100x100 is 10 thousand pixels, and 1000x1000 is 1 million pixels.

Use 3D animation

Use transform: translate3d to accelerate GPU rendering.

4 JavaScript

Avoid shuffling

High-cost operations that may exist in rendering:

1. Modify, add, and delete DOM nodes

2. Move the DOM position or animation effect

3. CSS style modification (better re-painting proportion)

4. Adjust the window size, or perform absolute positioning, fixed background, and animation during scrolling.

5. Modify default page font

Browsers generally cache updated rendering of the Render Tree, except in the following cases:

1. Adjust the window size and modify the default font of the page

2. Client/offset/scroll

3. GetComputedStyle () currentStyle

Optimization suggestions:

1. Modify className instead of style

2. Modify the offline DOM, such as documentFragment or display: none, and then adjust the style.

3. Cache property value

4. Animation uses absolute/fixed

5. Do not use table layout (hold your entire body)

6. Modify low-level DOM

Event Delegate

Place events on multiple nodes to its parent node (Classic case: bind events on li to ul ).

Memory Management

Reasonably release and cache memory. Such as cache reuse attributes and contact object references.

5 resources

Compression size

The size of the compressed style, script, image, and other resources.

Image resources can be optimized from multiple perspectives, such as Preview small images and format selection.

Lazy Loading

Image lazy loading (loading only after scrolling to the display area.

Pre-Load

The resources used later are loaded in advance.

6 Client

LocalStorage Cache

Compared with cookies, localStorage has a larger storage capacity. Some static resources (such as the jQuery Library) can be cached.