Front End performance Optimization Scheme index

Haoycn

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

The optimization of the front-end performance of the network is constantly updated and continuously upgraded.

This is just a general summary of the index, each of which is very worthy of scrutiny and detail.

1 Requests and responses

Cache control

In the request head, can send if-modified-since and if-none-match and other information, to inquire whether the server request content is updated, if not updated, can return 304, tell the browser to use the cache, to avoid re-download resources. Pragma and Cache-control can also control the cache. such as telling the server not to cache and so on.

In response, Expires can tell the browser to expire, last-modified the last update time, and the ETag allows the browser to perform cache validation (used in If-none-match request information).

Multiplexing TCP

In the request head, the Connection can control the use of the TCP channel and use Keep-alive to reuse the last open TCP.

gzip compression

If gzip compression can be enabled, the response data size is reduced and the response is accelerated. In the request header, the accept-encoding can be used to inform the browser of the compression method supported, while the server responds with content-encoding.

Cookies

When sending a request, the cookie is also in the request. Therefore, cookies can also be used as an optimized object for reducing requests. For example, according to the same-origin restriction policy, you can use multiple domain names to load resources, such as loading static resources, you will not send extra cookies, and reasonably set the path of cookies and domain names, such as in the sub-station to avoid unnecessary cookies from the parent station.

Reduce HTTP Requests

There are a lot of details can be implemented, such as CSS Sprites, Data URL, and so on, because this part of the content and the following content is duplicated, so some details are described below.

Multi-domain distribution

There is a limited number of concurrent requests for browsers in the same domain, and multiple domain names can be used to increase concurrency, especially on some static resources. However, because DNS parsing itself is time-consuming, the principle of practice is 2-4 advisable.

An additional reminder is that there is no problem when loading the image resource, but the other resources are paused when the JavaScript script is loaded.

Using CDN

Accelerate access based on the fastest location the user can access.

Avoid redirects and 404

Redirection and 404 will waste the load request.

Favicon.ico

The resources that the browser loads by default are best able to be cached.

2 HTML

Reduce DOM

Too many DOM elements can affect rendering, loading, and execution. In addition to streamlining the page structure, you can delete unnecessary DOM elements (elements that are no longer accessible within the page), or you can lazily load (elements that are not necessarily used, such as a login box).

CSS and JavaScript file locations

CSS put Head,javascript put body closed before the tag. But because:

• Stylesheet does not participate in DOM modification, so document parsing is not stopped for parsing styles

• The browser avoids redrawing and does not start rendering until all styles have been obtained

• When parsing a style, some browsers (FF) Stop the script from running, while others (Webkit) Stop the script when the script accesses the style property but may be affected by the non-loaded style

• The style may be requested in script parsing and will be faulted if the style has not been resolved

• Script execution pauses parsing of documents and downloading of resources

Therefore, putting the two in the right place can greatly improve rendering efficiency.

Script deferred loading

You can add scripts to the defer and async properties. The common point of the two attributes is that the loading of the script and the parsing of the document are synchronous, but the difference is that once async is loaded, the document parsing and executing the script is stopped immediately, and defer waits for the document to parse and execute.

Rational use of inline

Scripts and styles should be selected inline or outside the chain as needed. For pages with less access, style, and script reuse, consider using inline styles to reduce HTTP requests. However, if page access is frequent, style scripts are often reused on multiple pages, and the use of an outer chain is the best choice.

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

And the image is the same, the advanced browser supports the image data directly base64 encoded in the SRC attribute, if necessary, can be directly in the HTML output image data.

Reduce IFRAME

The IFRAME itself has many advantages, such as the ability to download scripts in parallel, suitable for loading slow content (such as ads), while the browser can control them safely.

The main consideration for reducing the use of an IFRAME is that the IFRAME hinders page loading and has no semantics.

3 CSS

Selector Selector

Selector efficiency ranks as follows:

• ID Selector

• Class Selector

• Tag Selector

• Adjacent selector

• Child Selector

• Descendant Selector

• Wildcard Selector

• Property Selector

• Pseudo class Selector

Efficiency and priority are not peer relationships, high priority is not necessarily high efficiency. such as #id. Class is higher priority than a single #id, but the efficiency ratio is slow.

Selector writing suggestions are:

• Avoid using wildcard characters

• Do not use tag names or class names to decorate ID rules: if the rule uses the ID selector as the key selector, do not add a tag name to the rule. Because the ID itself is unique, adding tag names unnecessarily reduces the matching efficiency

• Do not use tag names to decorate classes: classes are more unique than labels

• Try to choose the most specific way: The simplest and most brutal cause of inefficiency is the use of too many rules on labels. Adding classes to an element can be broken down into classes faster, reducing the time it takes for the rule to match the label

• About descendant selectors and sub-selectors: Avoid using descendant selectors, but not to use a sub-selector instead, but a sub-selector should be used with caution, tag rules never contain sub-selectors

• Take advantage of inheritance: No need to declare styles on general content

Avoid filters, expressions, Hack

Low efficiency.

Sprites

Merging pictures can reduce HTTP requests. Other recommendations are:

1. Horizontally arranging pictures in a Sprite, vertical arrangement increases file size

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

3. Do not leave a large gap in the middle of the spirite image. While this is unlikely to increase the size of the file, it requires less memory for the user agent to decompress the image into a pixel map. 100x100 's picture is 10,000 pixels, and 1000x1000 is 1 million pixels.

Using 3D animations

Use Transform:translate3d and so on to accelerate GPU rendering.

4 JavaScript

Avoid re-scheduling

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 (redraw the specific gravity row better)

4. Resize the window or scroll with absolute positioning, fixed background, and animations

5. Modify page Default font

Browsers generally cache the render tree's updated rendering, except in the following cases:

1. resizing windows and modifying page default fonts

2. Client/offset/scroll

3. getComputedStyle () Currentstyle

Optimization Recommendations:

1. Modify ClassName rather than style

2. Offline DOM after modification, such as documentfragment or display:none after adjusting the style

3. Cache attribute Values

4. Animation using absolute/fixed

5. Do not use table layouts (hold a body)

6. Modifies a lower-level DOM

Event delegate

Place events on multiple nodes to their parent node (classic case: Bind events on LI to ul).

Memory management

Reasonable release and cache memory. such as cache reuse properties, contact object references, and so on.

5 Resources

Compression size

Compresses the size of a resource such as style, script, image, and so on.

For image resources, you can optimize from a preview thumbnail, format selection, and many other angles.

Lazy Loading

Like lazy loading (scrolling to the display area before loading) and so on.

Pre-load

Pre-loaded for resources that will be used later.

6 Client

Localstorage Cache

Larger storage capacity than cookies,localstorage. You can cache some static resources, such as the jquery library.

Front End performance Optimization Scheme index