JavaScript——<script>阻塞DOM解析

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

 

我们可以做以下处理：

1. 将script标签放在html文件底部，避免解析DOM时被其阻塞
2. 延迟脚本
   1. 在script标签上设置defer属性
      1. 告知浏览器立即下载脚本，但延迟执行。当浏览器解析完html文档时，再执行脚本。　　

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

          

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

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

          

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