1. What happens when you open the page first?

The browser renders a page roughly in the following steps

(1) DNS resolution

(2) TCP connection

(3) HTTP request

(4) HTTP return

(5) Rendering

As shown in the figure above, the URL needs to be resolved to the corresponding IP address through DNS (Domain name resolution System), and then TCP network connection is established with the server with the corresponding IP address. Then HTTP request is sent to the server, and the server processes the request and sends the target data back to the client in the HTTP response. The browser that receives the response data can begin the rendering process. After rendering, the page is presented to the user and waiting to respond to the user’s actions. This article analyzes HTTP requests and HTTP responses to page rendering, not DNS resolution and TCP connections.

2. What are the causes of slow loading?

Static resources, such as CSS and JS, are too large.

Too many HTTP requests;

The picture in the home page column is large and not compressed.

HTTP caching is not used;

Network fluctuation causes speed instability. HTTP optimization has two broad directions:

(1) Reduce the number of requests;

(2) Reduce the time spent on a single request.

3. Solutions

1.HTTP optimization has two general directions:

(1) Reduce the number of requests;

(2) Reduce the time spent on a single request.

These two optimization directions correspond to resource compression and merger in the front-end development process:

(1) We compress and merge static resources by building tools (Webpack);

(2) At the same time, static files in the project are compressed by Gzip, such as reducing image quality and image volume;

(3) Use HTTP caching

2. Browser rendering level optimization

With the HTTP direction optimized above, let’s go to the browser rendering level optimization. First of all, the browser kernel can be divided into two parts: rendering engine and JS engine. The rendering engine includes HTML interpreter, CSS interpreter, layout, network, storage, graphics, audio and video, image decoder and other components. We optimized each component in the following list to make our pages faster in the rendering process.

(1) HTML interpreter: output THE DOM tree of HTML documents through lexical analysis;

(2) CSS interpreter: parse CSS documents and generate style rules;

(3) Layer layout calculation module: layout calculates the exact position and size of each object;

(4) View rendering module: draw images of specific nodes and render pixels on the screen;

(5) JavaScript engine: Compile and execute JavaScript code.

Let’s take a look at the browser rendering process:

Based on the above list and flow, we will optimize the rendering layer:

(1) In the OPTIMIZATION of HTML, we try to reduce DOM structure, reduce hierarchy, so that the HTML structure as simple as possible.

(2) in THE CSS optimization to avoid the use of wildcards, only to select the elements that need to be used, and by inheriting the realization of the property, avoid repeated matching repeated definition, less label selector, more class selector instead.

(3) Optimize the loading sequence of blocking resources at the same time, and download CSS to the client as soon as possible to shorten the first rendering time. Load JS files using async, defer to prevent blocking.

(4) Reduce backflow and redrawing in the process of DOM operation, cache the parts that need to be modified, and modify to complete a rendering.

(5) Lazy-load is used. Only static resources and images required in the first screen are loaded in the first screen, and other resources are loaded asynchronously.

(6) In the home page, throttling is used to prevent shaking, and scroll events and keyboard events are wrapped by corresponding callback functions to cache time information in the form of free variables. Finally, setTimeout is used to control the triggering frequency of events, and throttling and shaking prevention are realized in the form of closures to reduce requests or DOM manipulation.