script阻塞DOM解析

script阻塞DOM解析

浏览器解析html文件时，从上向下解析构建DOM树。当解析到script标签时，会暂停DOM构建。先把脚本加载并执行完毕，才会继续向下解析。js脚本的存在会阻塞DOM解析，进而影响页面渲染速度。
我们可以做以下处理：

1. 将script标签放在html文件底部，避免解析DOM时被其阻塞
2. 延迟脚本
   在script标签上设置defer属性

<script type="text/javascript" defer="defer" src="1.js"></script> 

告知浏览器立即下载脚本，但延迟执行。当浏览器解析完html文档时，再执行脚本。

3. 异步脚本

<script type="text/javascript" async src="1.js"></script>
<script type="text/javascript" async src="2.js"></script>

和defer功能类似，区别在于不会严格按照script标签顺序执行脚本，也就是说脚本2可能先于脚本1执行。脚本都会在onload事件前执行，但可能会在 DOMContentLoaded 事件触发前后执行。

注意：defer和async都只适用于外部脚本