Optimizing browser rendering, rendering path starting from the key, basically is to optimize the dependency HTML, CSS, JS's.
Which build HTML DOM consumption is a must.
1. From blocking rendering CSS
CSS is the default render blocking resources.
Depending on the browser rendering process shows that the basis of the browser DOM and rendering is CSSOM. Before generating CSSOM, will not render anything.
It is to start the process of generating CSSOM the server to download the CSS file (regardless of blocking or not they have to download), and then filter out the blockage rendered CSS file generation CSSOM.
In order to shorten the time of generation CSSOM:
1. It should be as concise as possible CSS
2. The use of media types and media queries to unblock for rendering.
:( examples are downloaded, but only the media conditions are met, only for CSSOM)
// Only when the page is> = 400px will be blocked when rendering <link href = "./ 1.css" rel = "stylesheet" media = "(min-width: 400px)">
2. From the rendering of inline script blocking
In rendering critical path, if the parser encounters HTML script tag, will suspend construction of DOM, JS transfers control to the engine,
And other js execution is complete, and then suspended from place to continue to build between DOM. In other words, js script will hinder DOM building, delaying the first rendering.
If, during js script execution, modify CSSOM of the situation encountered:
- Firefox CSSOM before js browser will wait for the completion of construction of re-execute the script;
--webkit browser will be suspended js script and DOM building until the completion of CSSOM download and build.
3. Download blocked from rendering JS file
In order to shorten the blocking time JS script:
1. script to add async attribute
async attribute may be used outreach script; inline script async attribute can not be used.
Encounter outreach js, browser rendering pause, get start with the disk / cache / remote server to get the script, download time significantly blocked rendering.
Add asynchronous logo, it will lead to the lifting of file downloads rendered obstruction.
<script src="../js/1.js" async></script>
The role of async attribute is: Download script used by another process;
1. HTML parser encounters async attribute script outreach label;
2. HTML parsing will continue, while the parallel download js files;
3. Wait js file download is complete, pause HTML parsing, execute the script immediately;
4. After the script execution, HTML parsing continues.
If you have multiple script tag containing the async attribute, order execution order will be completed in accordance with the download.