网页加载与阻塞

发表于 2020-12-26 分类于探索

前言

注：本文写于2020年较早的时候，只是最近整理发布，因此关于渲染流程的认识比较肤浅，重点关注阻塞策略部分就好了；

基本流程

阻塞策略

虽然普通的link及script会阻塞DOM的解析，但是有一些方法可以调整原始的阻塞策略；

调整script位置

由于script不论内联还是外部，不论加载与否都会阻塞DOM的解析，因此将script标签移至DOM最后（即<body>闭合标签前），可以最小地影响DOM的解析。

defer/async属性

这两个可以用于非内联script标签（即必须设置src属性），当设置为true时，对应的script标签不会阻塞DOM的解析，但是两个属性的作用还是有所不同的。

defer属性

defer，意为延迟；该属性除了可以使script标签不阻塞DOM解析，还会使对应的script标签的执行阶段延迟到DOM解析完成后，DOMContentLoaded事件触发前；也就是所有的defer脚本都必须在加载完且DOM解析完成后才能执行，且按照顺序执行；

async属性

这个属性就比较简单粗暴，仅仅只是不阻塞DOM而已，加载完后对应的script会按顺序执行，因此执行的时机取决于加载完成的时间点（有可能在DOMContentLoaded事件触发前执行，也可能在触发后执行），但是必定会在window的load事件触发前执行；

预加载策略

预加载，顾名思义就是预先加载某些会用到的文件，可以是脚本、样式，也可以是媒体文件等；通过预加载设置可以改变原本的一些文件加载顺序和优先级；

设置link标签的rel属性为preload或prefetch可以开启对应文件的预加载，此时href属性值就是预加载的文件地址，然后通过as属性可以指定文件用途（浏览器内部根据不同的as类型会有不同的加载优先级）；

preload 还有许多其他好处。使用 as来指定将要预加载的内容的类型，将使得浏览器能够：

更精确地优化资源加载优先级。

匹配未来的加载需求，在适当的情况下，重复利用同一资源。

为资源应用正确的内容安全策略。

为资源设置正确的 Accept 请求头。^[2]

比如，可以通过设置对应的预加载，提前在头部加载脚本文件，然后在底部执行脚本；这样既能避免阻塞DOM解析，又可以提前加载脚本文件；

<head>
    <!-- ... -->
    <link href="test.js" rel="preload" as="script">
    <!-- ... -->
</head>
<body>
    <!-- ... -->
    <script src="test.js"></script>
</body>

preload和prefetch的区别

prefetch虽然也是对资源文件进行预加载，但是其设计目的是为了预加载下一页或之后可能会跳转的页面所需要用到的文件，因此其优先级低于preload。

验证实验

script的执行是否阻塞DOM的解析？

<p id="t1">t1</p>
<script>
  for (let i = 1; i < 1000000000; i++) {
    // 模拟同步执行耗时
  }
  console.log(1, window.t2)
</script>
<p id="t2">t2</p>
<script>
  console.log(2, window.t2)
</script>

根据上述代码设计，如果script的执行不会阻塞DOM解析，那么第一处打印应该不会是undefined；反之若阻塞DOM解析，则为undefined；实际结果为：

因此答案为：script的执行会阻塞DOM的解析；

script的加载是否阻塞DOM的解析？

<head>
  <script>
    let start = Date.now()
  </script>
  <script>
    setTimeout(() => {
      console.log(1, window.t1)
    }, 10)
  </script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
</head>
<body>
  <p id="t1">t1</p>
  <script>
    console.log(Date.now() - start)
    console.log(2, window.t1)
  </script>
</body>

根据上述设计，如果外部script的加载不会阻塞DOM解析，那么第一处的打印将不会是undefined；反之则为undefined；测试的时候可以将网速调慢，这样对比更明显：

得到的测试结果为：

因此答案为：script的加载会阻塞DOM的解析；

css的加载是否阻塞DOM的解析？

<head>
  <script>
    let start = Date.now()
  </script>
  <script>
    setTimeout(() => {
      console.log(1, window.t1)
    }, 100)
  </script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
  <p id="t1">t1</p>
  <script>
    console.log(Date.now() - start)
    console.log(2, window.t1)
  </script>
</body>

同理，首先降低网速，得到的打印结果为：

因此答案为：css的加载不会阻塞DOM的解析；

css的加载是否阻塞JS的执行？

<head>
  <script>
    let start = Date.now()
  </script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap-grid.css" rel="stylesheet">
  <script>
    console.log(Date.now() - start)
    console.log(1, window.t1)
  </script>
</head>
<body>
  <p id="t1">t1</p>
</body>

同样地，降低网速进行测试，得到打印结果：

显然，css文件之后的js是在css文件加载之后才执行的；

因此答案为：css的加载会阻塞JS的执行；

css的加载是否阻塞DOM的渲染？

<head>
  <style>
    #t1 {
      color: red;
    }
  </style>
  <script>
    let start = Date.now()
    console.log('start')
    setTimeout(() => {
      console.log(1, window.t1)
    }, 10)
  </script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
  <p id="t1">t1</p>
  <script>
    console.log(Date.now() - start)
  </script>
</body>

同样地，降低网速进行测试，录制结果为：

从录制gif可以明显看到虽然css加载不阻塞DOM的解析，但是加载过程中DOM是不会被渲染到浏览器的，直到css文件加载完成（CSSOM构建完成）才会进行渲染，因此css的加载会阻塞DOM的渲染，造成白屏；

设置defer的script加载是否阻塞DOM的解析？

<head>
  <script>
    let start = Date.now()
  </script>
  <script>
    setTimeout(() => {
      console.log(1, window.t1)
    }, 0)
  </script>
  <script src="./test06.js" defer></script>
</head>
<body>
  <p id="t1">t1</p>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log(Date.now() - start)
      console.log('DOMContentLoaded', window.t1)
    })
  </script>
</body>

1 2	// test06.js console.log('外部JS')

同样地，降低网速进行测试，得到打印结果：

从打印结果不难看出加了defer属性的script加载并不会阻塞DOM的解析，而且会在DOMContentLoaded事件之前执行完；

设置async的script加载是否阻塞DOM的解析？

<head>
  <script>
    let start = Date.now()
  </script>
  <script>
    setTimeout(() => {
      console.log(1, window.t1)
    }, 0)
  </script>
  <script src="./test07.js" async></script>
</head>
<body>
  <p id="t1">t1</p>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      console.log(Date.now() - start)
      console.log('DOMContentLoaded', window.t1)
    })
    window.addEventListener('load', () => {
      console.log('load')
    })
  </script>
</body>

同样地，降低网速进行测试，得到打印结果：

结果跟defer类似，不会阻塞DOM的解析，而且async脚本并不会影响到DOMContentLoaded事件的触发，但是会影响到load事件的触发；

进行预加载（preload）的script是否阻塞DOM的解析？

<head>
  <script>
    let start = Date.now()
  </script>
  <script>
    setTimeout(() => {
      console.log(1, window.t1)
    }, 0)
  </script>
  <link href="./test08.js" rel="preload" as="script">
</head>
<body>
  <p id="t1">t1</p>
  <script src="./test08.js"></script>
</body>

同样地，降低网速进行测试，得到打印结果：

结果很明显：预加载的script不会阻塞DOM的解析；

但是，如果预加载的script后面有其他DOM，这时仍然会阻塞后面的DOM解析！

上述实验源码放在这里：https://github.com/xxf1996/web-load-test

实验结论

根据以上实验测试，可以得出：

css的加载会阻塞其后的js执行，不会阻塞DOM的解析，但是会阻塞DOM的渲染；
js的加载和执行都会阻塞DOM的解析；
给script设置defer或async属性可以避免阻塞DOM的解析；

网页加载与阻塞

前言

基本流程

相关概念

阻塞策略

调整script位置

defer/async属性

defer属性

async属性

预加载策略

preload和prefetch的区别

验证实验

实验结论

相关文档