text 脚本异步延迟

Posted 2021-05-02

script执行
浏览器在执行HTML的时候如果遇到<script>时会停止页面的渲染,去下载和执行js的文件直接遇见</scirpt>会继续渲染页面。故浏览器在执行js文件的时候浏览器表现为一片空白,为了解决这个问题ECMAScript定义了defer和async两个属性用于控制JS的下载和执行

defer
对于defer，我们可以认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照原本的js的顺序执行，所以如果前后有依赖关系的js可以放心使用
这个值设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。对动态嵌入的脚本使用 `async=false` 来达到类似的效果。
相同点：

加载文件时不阻塞页面渲染
对于inline的script无效
使用这两个属性的脚本中不能调用document.write方法
有脚本的onload的事件回调

DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 
~~~javascript
document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
~~~  
兼容ie9及以上

参考：https://www.jianshu.com/p/17dc82bf08f1