Front-end performance optimization

Let us first look at how a webpage came from, that is, from the user entered a URL point under the "enter" key to the entire page loaded out of what happened in the middle. First we understand the following HTTP process:

One, the search for IP (each step is not found in the case of the previous step)

Local stage:

1, browser search itself cache;

2, search the operating system's own DNS cache;

3, regional local host file;

4, the browser sends the DNS system call;

Routing phase:

1, the broadband operator server to view the local cache;

2, the carrier server initiates an iterative DNS resolution request;

Baidu.com, COM, www.baidu.com

3, the operator server returns the result to the operating system kernel simultaneously caches;

4. The operating system kernel returns the result to a browser

The browser gets the IP.

Second, establish the connection and obtain the content

1, initiates the HTTP three handshake, establishes the TCP/IP connection;

2. Initiating an HTTP request;

3, the server side read the database and processing data after the return page content;

This gets a page, but the page's JS files, CSS files, pictures have to go through this process!

4, render the page;

We write baidu.com and www.baidu.com also will jump to Baidu home, but Baidu.com is after a 301 page jump to www.baidu.com, more than a DNS query;

Common Status Code: 1XX request accepted 2xx processing completed 3xx redirect 4xx client error 5xx server-side error  $ OK Success  - Client Syntax error 401 Not authorized 403 denial of service 404 Page not found  - Error 503 can't handle it.

Third, render the page

1) The browser will parse three things:
One is html/svg/xhtml, in fact, WebKit has three C + + classes that correspond to these three types of documents. Parsing these three types of files produces a DOM Tree.
CSS, parsing CSS will produce a CSS rule tree.
Javascript, scripts, mainly manipulate DOM tree and CSS Rule tree through the DOM API and the Cssom API.

2) After parsing is complete, the browser engine constructs the Rendering tree through Dom tree and CSS Rule tree. Attention:
Rendering tree rendering trees are not the same as Dom trees, because something like a header or a display:none doesn't have to be placed in the rendering tree.
The CSS rule tree is primarily designed to complete the match and attach the CSS rule to each element on the rendering tree. This is the DOM node. The so-called frame.
Then, calculate the position of each frame (that is, each element), which is called the layout and reflow process.

3) Finally by invoking the operating system native GUI API drawing.

In fact, the process is very complex, in some places the order is different from the script, the network, and so on, this is just a brief introduction.

Iv. Plays: Optimization.

1. Minimizing HTTP Requests
2. Use the Content Publishing network (CDN accelerated use)
3. Add Expires Header
4. Compression components (using gzip mode)
5. Put CSS style sheets on top
6. Place JavaScript scripts at the bottom
7. Avoid using CSS expressions
8. Using external JavaScript and CSS
9. Reduce DNS queries
10. Thin JavaScript
11. Avoid redirects
12. Delete duplicate script
13. Configuring the ETag
14. To make Ajax cacheable

1, the compression script, merges the file, removes the space to wrap, and so on, uses the external file JS, facilitates the cache. Put JS in the end, let the user see the page first, enhance the user experience.

2, CSS placed in the head tag, to prevent flicker-free style.

3, do not write: <a href= ' https://www.baidu.com ' > Baidu </a>, to write: <a href= ' https://www.baidu.com/' > Baidu </a >.

4. Compress pictures, use Sprite chart, etc.

5, avoid the use of CSS expressions, some people say that only in the IE use of things there is no good things.

6. Use <link> instead of @importChoose <link> over @import, which is equivalent to putting CSS at the bottom of the file.

7, the page display as far as possible only let CSS do.

8, reduce the DOM operation, information transmission as far as possible using JSON.

9, avoid repainting, you can use CSS or absolute positioning to reduce the scope of impact.

10, reduce the use of cookies and try to make cookies small.

Front-end performance optimization