Performance Optimization 1

Why optimize performance

1. 57 percent of users will close the current web page if the loading time is more than 3 seconds; 2. Poor performance in a ToC business directly affects transaction volume, order rate, etc.

Once we in the study of the front end of the time believe that have been exposed to yahoo catch-22 35 and so on performance optimization recommendations

How do we see the web page

2.1 Processes and Threads

Processes contain threads, and threads depend on processes. Browsers used to be single-process.

Having so many functional modules running in a single process is a major factor in making single-process browsers unstable, fluid, and insecure. I will analyze the reasons for these problems one by one.

After 2007, multi-process browsers became popular; Chrome improves the design of the browser. As follows:

And now it’s like this:

As can be seen from the figure, the latest Chrome Browser includes: one main Browser process, one GPU process, one NetWork process, multiple rendering processes and multiple plug-in processes.

Browser process: responsible for interaction, display, storage and other functions;

Render process: The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers run in sandbox mode;

GPU process: processing 3D CSS;

Network process: responsible for the loading of network resources;

Plugin process:

3. Cliche – What happens when you go from url input to page load

1. The browser process starts domain name resolution by entering the URL. First, go to the local host for matching.

The DNS resolution process is as follows: Browser: domain name -> Browser cache -> Y -> IP browser is not displayed on the host: -> OS DNS cache /hosts -> Y -> Return IP is not displayed on the router: -> Check whether there is a DNS server in the cache -> Y -> Return no DNS server: -> DNS server // If there is no DNS server, go to the top-level domain name serverCopy the code

Obtain the port number. The default value is 80 for HTTP and 443 for HTTPS. 3. Network process, according to the IP and port number to establish TCP links, through three handshakes if HTTPS and TLS links;

See http0.9,1.0,1.1,2.0,3.0 for detailsCopy the code

4. The system reads the local cache before sending a request.

First, it will read the memory, and then the hard disk, if they do not go to the server; From Memory cache,from Disk cache, 304;Copy the code

5. The HTTP request checks the strong cache of the browser. If a match is found, the browser returns a copy of the corresponding resource file.

Strong caching is controlled by response header fields: Expires, cache-control, Expires is the expiration time, is an absolute value, Expires will request again; Cache-control has several attributes, such as max-age,no-cache, and no-store. Cache-control takes precedence over ExpiresCopy the code

6. If there is no match, the negotiation cache is used to compare the resource and determine whether it needs to be updated. If there is no need to read the local cache, load a new resource if it needs to be updated. 7. The server returns an HTML response to the browser 8. The renderer: the browser parses HTML 9. For all references to an HTML page, including JS, CSS, images, etc., the browser sends a GET request and repeats the process

That's the superficial experience, but what does it do in the browser environment? 1. The browser process receives the URL request from the user and forwards the URL to the network process. 2. Then, initiate the actual URL request in the network process. The network process then receives the response header data, parses it, and forwards it to the browser process. After receiving the response header data from the network process, the browser process sends a "CommitNavigation" message to the renderer process. After receiving the "submit navigation" message, the renderer process is ready to receive THE HTML data by directly establishing a data pipeline with the network process. 3. Finally, the renderer sends a "commit confirmation" to the browser process, which tells the browser process that it is ready to accept and parse the page data. 4. When the browser process receives a "submit document" message from the renderer, it removes the old document and updates the state of the page in the browser process. Enter URL -> Network Process -> Browser process -> HTML encountered -> Submit navigation -> beforeUnload -> Navigation done -> Render process readyCopy the code

4. What is the rendering process like

The rendering process is very complex, but if you look at it step by step, the overall process looks like this:

HTML/CSS/JS -> sub-process -> Sub-process -> sub-process -> complete page.

The subprocesses include building a DOM tree, styling calculations, layout stages, layering, drawing, chunking, rasterization, and composition.

How to analyze the process; Focus on three elements: input -> processing -> output.

4.1 Building a DOM Tree

Question 1: Why build a DOM tree?

Question 2: How do I build a DOM tree?

Enter HTML -> Parse HTML -> DOM treeCopy the code

Q3: How to parse it?

1. First, the browser converts the original byte into a string according to the encoding format. 2. Turn strings into HTML, tags; 3. Convert these labels into objects and assign styles and attributes. 4. Generate a DOM treeCopy the code

4.2 Style Calculation

Purpose: To calculate the style of DOM nodes;

How do you calculate that?

Step 1: When the renderer receives a CSS file, it needs to convert it to a stylesheets that the browser understands.

Step 2: Standardize attributes, such as EM, REM => px, etc.

Step 3: Calculate the style of each DOM node;

1. Inherit the style first. 2.Copy the code

In general, it’s similar to DOM;

4.3 LayOut

Now that you have the DOM tree and node styles, what do you do next?

1. Create a LayOut tree

The creation process consists of two steps: 1. Traverse all visible nodes in the DOM tree and add these nodes to the layout tree; 2. 2. Invisible nodes are ignored by the layout treeCopy the code

2. Calculate the location

Summary: After the HTML page content is submitted to the rendering engine, the rendering engine first parses the HTML into a DOM that the browser can understand. Then according to the CSS style sheet, calculate the style of all nodes in the DOM tree; It then calculates the geometric position of each element and stores this information in the layout tree.

4.4 the layered

We know that pages are two-dimensional, but there are attributes that cause pages to be hierarchical, such as z-index; At this point the browser will layer our DOm node, design students should know. A page is a stack of layers; At this point, a Layer Tree will be generated.

1. Priorities are as follows: Positive Z-index > Z-index = 0 > inline > float > Block > Negative Z-index > border > background

2. The first place that needs to be cut will also occupy a separate layer;

The clipping here is not the clipping of Canavs, but the clipping in the drawing pageCopy the code

4.5 painted (paint)

The layer is drawn, the drawing process generates a drawing list, and then committed to the render process, which is completed by the compositing thread in the render process.

4.6 rasterize

The composition thread will divide the layer into 256×256 or 512×512 blocks; The compositing thread prioritizes bitmap generation based on the blocks near the viewport, and the actual bitmap generation is performed by rasterization. Rasterization refers to the transformation of a map block into a bitmap.

4.7 Synthesis and display

Once all the tiles are rasterized, the composite thread generates a command to draw the tiles — “DrawQuad” — and submits the command to the browser process. The browser process receives the command and commits the page content to memory. Finally, it is displayed on the page.

The summary goes something like this:

1. The renderer transforms the HTML content into a readable DOM tree structure. 2. The rendering engine converts CSS styleSheets into browser-readable styleSheets, computes and generates CSSOM trees. 3. Create a layout tree and calculate the layout information for the elements. 4. Layer the layout tree and generate a layer tree. 5. Generate a draw list for each layer and submit it to the composition thread. 6. Composite threads divide layers into blocks and convert blocks into bitmaps in the rasterized thread pool. 7. The composite thread sends the DrawQuad command to the browser process. 8. The browser process generates a page based on the DrawQuad message and displays it on the monitor.Copy the code

Great summary

1. The browser process starts domain name resolution by entering the URL. First, go to the local host for matching. The DNS resolution process is as follows: Domain name -> hosts matches -> Return to the IP domain name -> Check whether the DNS cache exists -> Y -> Return to the domain name -> Check whether the DNS cache exists -> DNS server // If no match is found, the system searches for the DNS serverCopy the code

Obtain the port number. The default value is 80 for HTTP and 443 for HTTPS. 3. Network process, according to the IP and port number to establish TCP links, through three handshakes if HTTPS and TLS links;

See http0.9,1.0,1.1,2.0,3.0 for detailsCopy the code

4. The system reads the local cache before sending a request.

First, it will read the memory, and then the hard disk, if they do not go to the server; From Memory cache,from Disk cache, 304;Copy the code

5. The HTTP request checks the strong cache of the browser. If a match is found, the browser returns a copy of the corresponding resource file.

Strong caching is controlled by response header fields: Expires, cache-control, Expires is the expiration time, is an absolute value, Expires will request again; Cache-control has several attributes, such as max-age,no-cache, and no-store. Cache-control takes precedence over ExpiresCopy the code

6. If there is no match, the negotiation cache is used to compare the resource and determine whether it needs to be updated. If there is no need to read the local cache, load a new resource if it needs to be updated.

7. The server returns an HTML response to the browser

8. Renderers: The browser parses the HTML

9. Browsers send GET requests for all resources referenced to HTML pages, including JS, CSS, images, and so on, and repeat the process

That's the superficial experience, but what does it do in the browser environment? 1. The browser process receives the URL request from the user and forwards the URL to the network process. 2. Then, initiate the actual URL request in the network process. The network process then receives the response header data, parses it, and forwards it to the browser process. After receiving the response header data from the network process, the browser process sends a "CommitNavigation" message to the renderer process. After receiving the "submit navigation" message, the renderer process is ready to receive THE HTML data by directly establishing a data pipeline with the network process. 3. Finally, the renderer sends a "commit confirmation" to the browser process, which tells the browser process that it is ready to accept and parse the page data. 4. When the browser process receives a "submit document" message from the renderer, it removes the old document and updates the state of the page in the browser process. Enter URL -> Network Process -> Browser process -> HTML encountered -> Submit navigation -> beforeUnload -> Navigation done -> Render process readyCopy the code

Build a DOM tree

11. Build CSSOM

12. Generate a shading layout tree

13. The layered

14. Draw

15. Rasterize

16. The synthesis of

17. Store the memory

18. Display pages

thinking

1. What is redraw and rearrange? 2. How to optimize each stage? 3. Why the virtual DOM? 4. Micro view of the browser – frame by frame process? . The above content summary comes from, extremely class time teacher Li Bing: “browser work away from practice”, the content is still to be improved, have ideas big guy, the idea on the public screen.