62.defer,async,load,DOMContentLoaded

84 阅读1分钟

在我们在html中我们使用js内容时我们可以在script标签中写,也可以用script中使用src引用,但是我们如果将js写在html的上方时会执行不了部分js内容,因为这时html文档还未加载.有时我们会用一些特殊的办法延迟js的加载.

defef

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成

async

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

DOMContentLoaded

当dom加载玩就执行,不等待所有内容加载完(图片之类的)

load

全部加载完后才执行 传统注册方式只以最后一个为准

  <script defer src="./a.js"></script> // console.log('defer');
  <script async src="./b.js"></script> // console.log('async');
  <script>
    window.addEventListener('load', () => {
      console.log('onload');
    })
    window.addEventListener('DOMContentLoaded', () => {
      console.log('DOMContentLoaded');
    })
  </script>

image.png

但是如果我们把async和defer换个位置,可能会获得意外的结果

  <script async src="./b.js"></script>
  <script defer src="./a.js"></script>

image.png image.png

async 如果放在最上面 他的加载顺序其实是不定的,他是在onload事件之前加载,但是具体的加载时间不定