在我们在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>
但是如果我们把async和defer换个位置,可能会获得意外的结果
<script async src="./b.js"></script>
<script defer src="./a.js"></script>
async 如果放在最上面 他的加载顺序其实是不定的,他是在onload事件之前加载,但是具体的加载时间不定