In the address bar url, after returning html, browser DOM order to begin loading and rendering
Body tag
When the browser encounters the body tag truly begin loading and rendering DOM, this time there will be the following situations:
DOM element
When the browser encounters dom element, the normal sequence of loading, side loading side rendering
Inline CSS
When faced with inline CSS, the browser continues to load, but the rendering is blocked, then generates a new CSS Rule Tree, generation after re-rendering interface
Outreach CSS
When faced with outreach CSS (link tag), the browser start a thread load css file, DOM continue to load but the rendering is blocked
内联Javascript
When faced with inline Javascript, the browser starts executing this script, DOM's load and render simultaneously blocked (there may be changes due JavaScript DOM Tree and Render Tree, thus simultaneously blocked)
Outreach Javascript
When faced with outreach Javascript, the browser starts downloading this script, execute it after the download is successful, this whole process of DOM load and render simultaneously blocked
Example
Use an example to explain
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
During the js file downloaded, behind js elements are not loaded, nor presented on the screen, the instructions to download the file js blocked DOM parsing and rendering
<html>
<body>
<h2>Hello</h2>
<script>
function print(){
console.log('first script', document.querySelectorAll('h2'));
}
print();
setTimeout(print);
</script>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/css/bootstrap.css">
<h2>World</h2>
<script> console.log('second script', document.querySelectorAll('h2')); </script>
</body>
</html>
Css files are still in the process of downloading, it has been possible to print out two <h>, can be seen loaded css files blocked DOM rendering but without blocking the DOM
defer 与 async
If we execute the following code, first load an external Javascript file, then load the DOM else:
<html>
<body>
<script src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>As we expected, there is no file to download and finished, Hello World is not printed out. If we add the async property to defer or external Javascript, so it will not clog DOM download other content loading:
<html>
<body>
<script async src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
<h2>Hello World</h2>
</body>
</html>
About the difference between async and defer attributes, please refer to my other article:
Javascript high-level programming study notes - in HTML using Javascript
