In simple way to understand the key rendering path
I looked at google's Critical Rendering Path after the (Chinese), trying to CRP (Critical Rendering Path) describe a user-friendly way. Of course, it is the official document describing the most detailed and reliable. Some pictures of the article is a direct quote from the official documents. If there is infringement immediately deleted.
1. What is CRP?
Tour requests from the beginning of the HTML document, the first rendered to the screen (the first screen), behind the need to do a lot of things, this thing is a series of CRP. App development time and shorten a lot of optimization are related to CRP. CRP shorten the length of the screen can effectively reduce the first time. This is the CRP understand the greatest benefit.
CRP probably consists of two parts: 1, loaded locally rendering, 2, network requests.
2. Render tour's principle
Loaded from the tour of your HTML document to the first screen, the middle of what happened?
TL;DR
Tour parses HTML DOM tree form.
Tour parse CSS code output CSSOM.
Construct a DOM and CSSOM with the Render Tree.
Tour calculates the precise position (layout) of the node on the Render Tree.
Use Render Tree Draw (Painting) to the screen.
Used to describe a document DOM structure, which is a tree structure. getElementById, querySelector and other API is for DOM operations. CSSOM nodes used to depict patterns on the DOM, so the figure is the root node CSSOM body, since there is no head tag style information. Succession process style is what has happened in the stage of construction CSSOM. When you use element.style time to access an element of style, in fact, it is the access node corresponding to the CSSOM. And then use the DOM to generate CSSOM Render Tree, which among many things to do, for example, if a node detects CSSOM corresponding element is present display: none, then the node will not output to Render Tree.
Next to each node is calculated using the Render Tree specific location on the viewport, this is the layout. CSS layout phase output "box model". Finally, these boxes, draw on the screen (Painting), in this process if it is detected visibility: hidden, it's browser will be plotted as a blank (blank here is completely blank instead of white ...)
For now visibility: hiddenand display: noneunderstanding should deepen a lot of specific difference can google.
This is probably the tour's rendering process.
3. In-depth CRP
In fact, CRP discussed more often in discussions CSS and JS. Because CSS and JS can block rendering. Why CSS and JS can block rendering? Hard to imagine if the tour is not the first show for a page style, and then suddenly refreshed, and this is a bad experience. The script will execute JS DOM access and CSSOM, Why JS is loaded synchronously, rather than asynchronously load it? Why do not handle style tour is the same as the file processing script file it? This fact is well understood, the general script file contains the logic of your application, if the script is loaded asynchronously, it would not be logical application of hell broke loose. .
What is the length of the CRP?
Get all blocked resources (key resources) required number of round trips, for example style files, script files; images are not critical resources, because the picture does not cause obstruction visit renders.
CRP on several key time points:
domLoading This is the beginning point of time throughout the CRP.
domInteractive tour is finished just a point in time build a DOM.
DOMContentLoaded the DOM is built, without any style block the script allows point in time. Means that when there is no script file execution, arrived at this point in time when the DOM is built, after all, no script needs to execute how there will clog it? But this is rare. When there is a script file to be executed, style (CSSOM) blocks the script file is executed, this time to wait until all styles will be ready to reach this point in time. So, when there is a script file, usually domContentLoaded will push back a lot.
domCompelete means that all resources have been downloaded, including images, fonts and so on. This point in time is triggered onload event.
Figure:
talk is cheap show me the code
HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Test</title>
</head>
<body>
<div>
<figure>
<img id="emma" src="http://photocdn.sohu.com/20150227/Img409195726.jpg" alt="emma">
<figcaption>Emma.Watson</figcaption>
</figure>
<button id="switch">Switch</button>
</div>
<script src="./index.js"></script>
</body>
</html> The code first references in the head in a style file, the script file referenced in the final document, which is a request to process because the script tag will cause clogged DOM parsing tour, tour will even take the time to wait for the script reference scripting resources (synchronous load), until after completion of the script before responding and resolve will control back to the tour is to continue parsing DOM request. Therefore script execution, it is likely DOM is not created, it is wise to put the final script. Where a total of three resources requested, but almost all initiated simultaneously, and therefore counted as a round trip, so CRP length is 1.
DevTools use the Timeline view the page load conditions. If you are not familiar DevTools, you can look Chrome DevTools quick start of the official website of the document. In fact here and not with a lot of knowledge in this area. A little understanding on the line. When using Timeline to pay attention to open stealth mode , otherwise there will be interference factors such as plug-ins and other excursions.
Loading performance screenshot above code:
There can be seen in FIG two vertical lines very close, blue indicates DOMContentLoaded event trigger time, red onload event in the trigger time. Two time points are very close, which is due to tour in requesting external script will wait for the response, so the event will be postponed DOMContentLoaded back. Here is a length of CRP. If there is no script file request, DOMContentLoaded that we applications will take place after the completion of DOM parsing it, rather than wait until all ready styles (CSS parsing is complete). Even here in the script file is linked to the HTML document is the same result. Because the execution of script code accesses CSSOM, tour is when parsing script code will be ready to wait for all CSSOM began to execute script code. So the effect is the same.
CRP above which is a flowchart of the code:
This can be seen in the time period T1 to T2, the operation's browser parses the DOM is blocked. Even inline script file.
Because most logical beginning of JavaScript frameworks are DOMContentLoaded event from the point of beginning (as fast DOMContentLoaded better than onload, onload will wait until the pictures and other resources are in place before the trigger, it will slow down the first screen time). Therefore, it is necessary to advance DOMContentLoaded.
CRP general process is like this:
There are two gray squares on the map, which is two blocks leading to the culprit CRP takes a long time!
4. Reduce CRP, starting!
CRP is to make as soon as possible to shorten the DOMContentLoaded event occurs, APP logic in order to perform as soon as possible, do not drag the onload, save a minute! Because after generating DOMContentLoaded, will build Render Tree, then yielded the user can see the APP.
Do not quote too much script files!
In the first few years of front-end development, like the script will reference written in HTML file, which can lead to DOMContentLoaded trigger significantly delayed. Because every time a script that will parse obstruction visit is to build DOM. When an HTML file references dozens of external script files, it is certainly a disaster! Fortunately, in recent years, various front-end tools package makes this problem solved.
Encountered a problem when Tencent written: Use HTTP2, there was no need for the JS file is packaged? The answer is: It is necessary, and is a must! Although HTTP2 same TCP connection may be implemented in parallel transmission of all resources (using a flow). But the strategy's browser handle external script file will not change! So there is still packaged necessary!
HTML file references into the final external script, or use the defer attribute.
Even if you use the packaging tools only references an external script file, but if the transmission delay and delay execution of the script file will result in non-critical resources behind the request is delayed, although it does not slow down APP's first screen time. But the presentation of non-time critical resources pictures but was delayed. Use defer attribute may be performed after the delayed time point to domContentLoaded. DOMContentLoaded also trigger after this point in time. It will first perform defer or DOMContentLoaded first trigger event? In order Chrome's browser is performed first and then defer DOMContentLoaded trigger event.
Use async attribute for an external script
async attribute tells the tour an asynchronous request an external script file, do not back up here. This makes the tour continues to build DOM. Or the process resource request later.
The style file request in the head tag.
CSS as soon as possible to specify all the resources in the HTML document, so the browser sees link tags and CSS issued a request as soon as possible as soon as possible.
Try not to use @importinstructions.
The CSS @importrepresentation to import another style file in a style file. A style file import another style file, only the style file has been received and will be resolved to complete the import. This will increase the length of the CRP.
Inline style
Using the style tag linked into the HTML document style, although doing so increases the volume of the HTML file. But it can reduce CRP length. While avoiding the implementation of the code of the script is blocked.
Why not inline script it? Because it is impossible to completely inline styles in most cases. This time, even using inline script will be blocked because CSSOM, prevents DOM building. So this is not an optimization measures.
Reduce the size and number of your key resources
This is the best means of optimization.
Else
Here no mention of how to optimize the application of logic to increase the speed, because it does not belong to the CRP.
The common Optimizer Amway.
Lighthouse is a network application auditing tools that can help you find the bottleneck of CRP.
Lighthouse screenshot:
This built-in API can help specific time value of each point in time you record, a point above said that several times there.
6. Finally, the last
If you feel where writing is not very appropriate or you do not understand, you can tell me in the comments. .
If you think I write content for your help. I can choose to follow.
My blog address is: mrcode
This article is reproduced in: ape 2048➭ https://www.mk2048.com/blog/blog.php?id=hhahici00jb