1, CRP: Critical rendering path

Around the rendering mechanism and steps, to carry out detailed optimization of each step, in order to improve the page rendering speed and performanceCopy the code

2. Data requested from the server based on the HTTP network

* + hexadecimal file stream * + the browser parses it into a string (HTML string) * + "lexical parsing" of nodes as identified by W3C rules * + generates a XXX treeCopy the code

3. When you visit the page, the first thing you get back is an HTML document, and the browser starts rendering from top to bottom

* + process: usually refers to a program (a browser opens a page, which is equivalent to starting a process) * + Thread: the specific thing in the process to perform transactions, a thread can only do one thing at a time * a process, may contain one to more threadsCopy the code

4, synchronous programming: generally, there is only one thread to deal with things, the above things can not be finished, the following things can not deal with “one thing one thing to do”

5. Asynchronous programming:

EventQueue+EventLoop + EventQueue+EventLoop + EventQueue+EventLoop *Copy the code

6. Browsers can open multiple processes/threads

* + GUI rendering thread: render page * + JS engine thread: render JS code * + HTTP network thread, can open N more: get resources and data from the server * + timer listener thread * + DOM listener thread * +...Copy the code

7. Rendering the page

* -> If the CSS code is small, we can directly embed the CSS, pull the HTML, at the same time the CSS is also back, render the CSS directly render * -> But if the CSS code is large, if you also use inline, On the one hand, it will affect the speed of HTML pulling, and is not conducive to the maintenance of the code, at this time it is better to use the external chain * + encounter link, the browser opens up an HTTP thread to request resource file information, While the GUI continues rendering down "asynchronously" * + There is a limit to the number of HTTP requests the browser can send at the same time (Google: 5-7) * + HTTP requests that exceed the maximum concurrency limit are queued * ->HTTP requests must be as few as possible... * + When @import is encountered, the browser also opens HTTP threads to request the resource, but the GUI also pauses (import styles hinder GUI rendering). When the resource request comes back, the GUI can continue rendering "syncing" * -> The @import should be avoided in real projectsCopy the code

Eight,

(1) Encountering script SRC =’ XXX /xxx.js’ will block GUI rendering

index.html:

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial-scale =1.0"> <title>Document</title> <script SRC ="./test.js"></script> </head> <body> <div id="box"></div> </body> </html>Copy the code

index.js:

var id = document.getElementById('box')
console.log(id)
Copy the code

Output result:

Solution:

  • DOM tree rendering trigger

  • Trigger when all resources on the page have been loaded

(2) Defer: It is a similar mechanism to Link and will not hinder GUI rendering. When the GUI is rendered, the requested JS will be rendered…

(3) 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 JS…

(4) Normal script tag, defer and async rendering (Parser is GUI rendering stage, NET is HTTP request stage initiated by browser, execution is execution stage)

(4) If we have 5 JS requests, if we do not set any attributes, we must be in order to request and render JS “dependencies are valid”; However, if async is set to render the first person who requests it back, the dependency is invalid; If you use defer, you can establish dependencies (the browser waits internally for all the resources that have been set to defer to come back after the GUI rendering is complete, and then loads the render JS in the order you wrote the dependencies).

For example, if we load JS in this order, async is set, it may be an error, because if test comes back first, it will execute immediately. It does not wait until the GUI is rendered to execute; Dependencies are invalidCopy the code

index.html:

test.js:

Execution Result:

It is ok to use defer without error: the browser waits internally for all the resources that have been set to defer to come back after the GUI rendering is complete, and then loads the render JS in the order of dependencies you wrote

(5) summary: real project development, we generally put link in the head of the page “is in order to not render DOM, notify HTTP to request CSS, so DOM rendering, CSS is almost back, more effective use of time, improve the rendering speed of the page”; We usually put JS at the bottom of the page to prevent it from blocking the RENDERING of the GUI, and if not, we’d better set async/defer… ;

(6) Webkit browser predictive parsing: Chrome’s htML-preload-scanner scans nodes for attributes such as “SRC” and “link” to find external connected resources and then preloads them, avoiding the waiting time for loading resources, and also realizing the pre-loading and separation of loading and execution. (Just request in advance, but the mechanism is still according to our analysis)

9,

(1) Reflow and redraw

(2) Performance optimization: avoid DOM backflow

* + (GUI rendering) DOM TREE (DOMContentLoaded event trigger) -> "Possible JS execution in the middle"? -> (GUI rendering) CSSOM TREE -> RENDER TREE -> Layout -> RENDER TREECopy the code

Layered drawing:

* + page rendering for the first time, will inevitably cause a re-flow and re-paint * + if we change the size and location of the element, the browser needs to recalculate the size and location of the elements in the viewport, recount is the process of reflow/rearrangement, a reflux operation happened, however, must also will trigger redraw “takes performance: DOM manipulation costs performance, 90% of what we’re talking about. “* + But if it’s just plain style changes, position and size remain the same, just redraw

If the page has an infinite loop, it will always load in a circle without error; However, if the requested file is not returned, then it will prompt an error, stack overflow will also be reported

10, the DOM tree

11, CSSDOM

12, Render Tree

13. Summarize the steps

Summary steps: You handle HTML tags, you build DOM trees you handle CSS tags, you build CSSOM trees you merge DOM and CSSOM trees into render trees and based on the render trees that you generate, you calculate their exact location and size within the device viewport, The stage of this calculation is reflow => Layout or reflow to get the absolute pixels of the nodes based on the render tree and the geometry obtained by reflow => painting.Copy the code

Optimization scheme:

(1) : SEMANTIC CSS tags and avoid deep nesting (dom tree will be deep after deep nesting)

CSS selectors render from right to left (a and. Box A performance comparison: A is higher; As soon as possible, download the CSS to the client (take full advantage of HTTP concurrency) style link-@import to the topCopy the code

(2) JS

Avoid blocking JS loading async defer to the bottomCopy the code