1. (URL parsing) When a user enters a keyword, the address bar determines whether to search for the content or the URL. For search content, the default search engine of the browser is used to synthesize the URL. If it is a domain name, a protocol (such as HTTPS) is added to synthesize the full URL.

2. (cache check) Check whether there are cached files in the local cache. If there are cached files, intercept the request and directly return 200. Otherwise, enter the network request process

3. (DNS resolution) Returns the IP address and port number corresponding to the domain name. If the DNS data cache service has cached the current domain name before, the DNS data cache service directly returns the cache information. Otherwise, a request is made to obtain the IP address and port number resolved based on the domain name. If there is no port number, the default value is 80 for HTTP and 443 for HTTPS. If the request is HTTPS, you need to establish a TLS connection.

4. (TCP three-way handshake to establish a connection)

Juejin. Cn/post / 692942…

5. (Sending HTTP requests)

6. (Server processes request)

(1) The application layer HTTP parses the request header and request body. If a redirect is required, HTTP directly returns the status code301 or 302 of the HTTP response data. At the same time, attach the redirect address in the Location field of the response header, and the browser will conduct the redirect operation according to code and Location. (2) If the resource is not redirected, the server will determine whether the resource is updated according to the if-none-match value in the request header. If the resource is not updated, the server will return the 304 status code. Otherwise, return the new data, 200 status code (3), and add a field in the corresponding header if you want the browser to Cache the data: cache-control: max-age =2000Copy the code

7. (TCP quad-wave) The TCP quad-wave disconnects after data transmission is complete. If the browser or server adds the following information to the HTTP header, TCP remains connected. Keeping TCP connections saves the time for establishing connections next time and speeds up resource loading. Connection: keep-alive

8. (Browser loads and parses rendering) When the browser gets an HTML file, it loads “top down” and parses and renders it as it loads.

(1) Process HTML tags and build DOM trees; (2) Process CSS tags and build CSSOM trees; (3) Fuse DOM and CSSOM trees into rendering trees; (4) According to the generated rendering trees, calculate their exact location and size in the device viewport. The stage of this calculation is reflow => Layout or reflow (5) According to the rendering tree and the geometric information obtained by reflow, get the absolute pixel of the node => painting (6) encounter the style embedded style, (7) When the link is encountered, the browser opens an HTTP thread to request the resource file information, while the GUI continues to render "asynchronously" (8) when the @import is encountered, the browser also opens an HTTP thread to request the resource. <script SRC =' XXX /xxx.js'>, which blocks the GUI rendering; + defer: This mechanism is similar to link's and does not hinder GUI rendering. When the GUI is rendered, the requested JS will be rendered. + async: Request JS resources asynchronously "open HTTP to request separately", at which point the GUI continues rendering; But as soon as the JS request comes back, it immediately suspends the GUI processing and renders the JSCopy the code

Optimization at this stage:

Juejin. Cn/post / 692241…

Juejin. Cn/post / 692385…