As a front end, there are often bosses or testers who suggest that some place is too slow to load and needs to be optimized. Our own website is the same, loading time is too long, they are impatient, for web optimization is very common, today we first introduce the principle of web page loading.

I. Introduction to the browser

To understand how a browser works, we need to know what the components of a browser are. And the function of each part.

The browser component looks like this:

Function and significance of each part:

  • User interface: the interface of the browser, including tabs, address bar, forward, back, refresh, favorites, etc. Except for the requested content page.
  • Browser engine: Interface for querying and manipulating the rendering engine.
  • Rendering engine: Also known as the “browser kernel,” it is used to parse HTML and CSS and display the results as a web page.
  • Network: Used for network calls, such as HTTP requests in back – to – back data interactions.
  • Js interpreter: Used to interpret and execute JS code.
  • UI back end: Draw basic elements, such as combo boxes and Windows, provide platform-independent interfaces, and use the corresponding implementation of the operating system internally.
  • Data storage: Belongs to the persistence layer. The browser needs to store all data on hard disk, such as cookies, images, CSS, etc.

Second, browser workflow

In the address bar of the browser user interface, type in the url of the site we want to visit and press Enter.

Browser workflow:

  1. Build request: The browser starts the network request thread and sends the complete HTTP request to the server.
  2. Lookup cache: Before actually making a web request, the browser looks in the data store to see if there is a file to request. If there is no cache, it indicates the first request and enters the network request process. When the browser has a cache, it intercepts the request, returns the cache, intercepts the request. Advantages of caching: Relieves server pressure, improves server performance, and quickly loads resources.
  3. IP address and port: Obtain the IP address and port information based on the URL and return the IP address and port corresponding to the domain name through DNS resolution. The browser also provides DNS data cache. If the PORT number is not specified in the URL, the default value is 80.
  4. TCP queue: Chrome has a mechanism to establish a maximum of six TCP connections in the same domain. If 10 requests occur at the same time, four of them are queued until the ongoing requests are completed. If fewer than six requests are queued, the TCP connection is directly queued.
  5. Establish TCP connection: The browser establishes a TCP connection with the server. TCP provides reliable connection service and establishes a connection using a three-way handshake.
  6. Send an HTTP request: After the connection is established, the browser can communicate with the server. The browser sends request information to the server, including the request method, request URL, and HTTP version.
  7. The server processes the request: After receiving the request information, the server will return the result based on the request information of the browser. The return result contains three parts: response line, response header, and response body. The response line contains a status code that tells the browser to process the result, and there are many HTTP status codes. The response header contains some information about the server itself, and the response body contains the actual HTML content of the web page.
  8. Server response and disconnection: Usually after the server returns the request data to the browser, the connection is closed, and after four breakups, the connection is disconnected.

The HTTP request phase in the browser is shown as follows:

HTTP request and response processing is a frequently used part of the front-end and back-end data interaction.

Third, the browser rendering process

The rendering engine retrives the requested document content over the network (in 8K chunks) and begins: parsing the HTML for the DOM tree > render tree structure > Layout Render > Draw the render tree.

The specific analysis process is as follows:

You start parsing the HTML content, turning the tag into a DOM node, and then parsing its external CSS file and the style information in the style. CSS style information and HTML tags to build the render tree. The render tree is made up of boxes containing color sizes and so on, displayed from top to bottom and left to right. Once the render tree is built, the layout process is performed to determine the exact coordinates of each node on the screen, and finally each node is drawn using the UI back-end layer.

To illustrate the process of browsing to parse HTML, CSS, js:

  1. Browse to the address bar, enter the address and press Enter, assuming the first visit, browse to the server to send a request, return the HTML file.
  2. Browse to load the HTML code and parse the external CSS file introduced by link in head.
  3. The browser requests a CSS file and the server returns the CSS file.
  4. The browser continues to load the body code, and once the CSS file is received, the page can be rendered.
  5. When the IMG tag introduces an image, it immediately sends a request to the server, and instead of waiting for the image to return, it continues rendering down.
  6. The browser received the returned image file, because the image occupies a certain area, affecting the typesetting behind, so browsing to need to go back to re-render this part of the code.
  7. The browser finds the script tag, which contains javascript code, and executes it immediately.
  8. The JAVASCRIPT script executes the JS statement, and if the JAVASCRIPT statement operates on a DOM element, the browser needs to re-render that part of the code.
  9. When it arrives, the page is rendered for the first time.
  10. If the user clicks the “skin” button, JS tells the browser to replace a CSS file, which in turn sends a request to the server.
  11. After the browser returns the new CSS file, re-render the page.

Note:

  • Js cannot be downloaded and parsed in parallel (blocking downloads).
  • When referencing JS, the browser sends a JS request and waits for the request to return. The browser needs a stable DOM tree structure, and javascript code may change the DOM tree structure directly, such as using Document. write or appendChild, or even using location.href. The DOM tree needs to be rebuilt, so other downloads and renders are blocked.
  • If there is a redefinition in the JS and CSS, the post-defined function overwrites the pre-defined function.

Look at the process of requesting, loading, and parsing a web page, and then how can you optimize your web page performance?