HTML加载过程

技术图片

在地址栏输入url，返回html后，浏览器开始顺序加载并渲染DOM

Body标签

当浏览器遇到body标签才算真正开始加载并渲染DOM，此时会有以下几种情况：

DOM元素

浏览器遇到dom元素时，正常顺序加载，边加载边渲染

内联CSS

当遇到内联CSS时，浏览器继续加载，但渲染被阻塞，此时会生成新的CSS Rule Tree，生成后重新渲染界面

外联CSS

当遇到外联CSS（link标签），浏览器启一个线程加载css文件，DOM继续加载但渲染被阻塞

内联Javascript

当遇到内联Javascript，浏览器开始执行这段脚本，DOM的加载和渲染同时被阻塞（由于JavaScript有可能会更改DOM Tree和Render Tree，因此同时被阻塞）

外联Javascript

当遇到外联Javascript，浏览器开始下载这段脚本，下载成功后执行它，这整个过程DOM的加载和渲染同时被阻塞

Example

用一个例子解释一下

<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>

技术图片

在js文件下载的过程中，js后面的元素没有被加载，也没有呈现在界面上，说明js文件的下载阻塞了DOM的解析并渲染

<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文件仍在下载的过程中，已经可以打印出两个<h>，可以看出css文件的加载阻塞了DOM渲染但没有阻塞DOM加载

defer 与 async

如果我们执行以下代码，首先加载外部Javascript文件，然后加载DOM其他内容：

<html>
<body>
  <script src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
  <h2>Hello World</h2>
</body>
</html>

如我们所料，文件没有下载并执行完毕，Hello World是不会打印出来的。
技术图片
如果我们为外部Javascript添加defer或async属性，那么它的下载就不会阻塞DOM其他内容的加载：

<html>
<body>
  <script async src="https://cdn.bootcss.com/docsearch.js/2.5.2/docsearch.min.js"></script>
  <h2>Hello World</h2>
</body>
</html>

技术图片
关于defer与async属性的区别，请参考我的另一篇文章：
Javascript高级程序设计读书笔记——在HTML中使用Javascript