本文将介绍script标签上的两种异步加载属性defer 和async的使用和区别
我们都知道默认情况下我们的页面会按顺序加载和执行js,在这个过程中,js后面的dom加载将会被堵塞,这就导致了如果我们引入了一个较大或者网络请求较慢的外部文件,页面白屏的时间会很长,影响页面效果。这也是为什么我们通常把js写在body后的原因。那么如果我们非要在dom前面引入js怎么办,如何能在不堵塞dom渲染的情况下加载和运行js呢?
script标签为我们提供了两种异步加载js属性:defer和async。
一:用法
<!-- 普通的引入 -->
<script src="a.js" ></script>
<!-- defer -->
<script src="a.js" defer></script>
<!-- async -->
<script src="a.js" async></script>
用法比较简单,只需要在script标签上直接写上属性名即可
二:区别
既然都是异步,为何还要引入两种属性?这说明他们肯定是有区别的。
- defer 是异步加载资源,但是会在文档渲染完毕,DOMContentLoaded事件执行前执行。如果页面有两个defer标记的script,他们会按他们在页面的顺序执行。
- async 也是异步加载资源,如果页面存在多个async标记的script标签。async 是在谁加载完了,谁就执行,并不保证顺序。且不一定在dom渲染完成前执行或者加载完成。
三:验证上面的区别
准备
- html页面一个
- 引入一个外部的cdn资源 (保证有足够的延迟),以jquery cdn资源为例
- 准备两个本地的js文件
test1.js 里面打印$变量
test2.js 里面打印字符串 “default” - 定义一个DOMContentLoaded事件,打印 “dom ready”
验证1:
如果同时存在两个defer,看他们的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<script defer src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script defer src="test1.js"></script>
<script src="test2.js"></script>
</head>
<body>
</body>
<script>
window.addEventListener('DOMContentLoaded', function () {
console.log('dom ready')
})
</script>
</html>
运行效果如图:
defer 的两个都在DOMContentLoaded前执行,且按顺序执行了。于是能打印出$函数。
验证二:
如果存在两个async,看他们的执行顺序
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script async src="test1.js"></script>
<script src="test2.js"></script>
</head>
<body>
</body>
<script>
window.addEventListener('DOMContentLoaded', function () {
console.log('dom ready')
console.log($)
})
</script>
</html>
结果如下,我们在test1.js 和 DOMContentLoaded事件里都尝试打印$ 均失败,说明test1.js 和jquery不是按顺序执行的。jquery在是在DOMContentLoaded事件后加载和执行的。
通过两个实验。基本证明了上面描述的两者的区别和作用机制是正确的。
四:使用场景
async 因为加载完了就立马执行,且不保序,不保证dom渲染结束完成后执行,适合用在互相没有依赖且对dom没有依赖的js脚本。比如百度访问统计的插件js,比如一些第三方的客服插件,分享插件等。
defer 因为保序,且在dom渲染结束后 DOMContentLoaded事件触发前执行,所以适合用在互相有依赖,且对dom也有一定依赖的脚本。比如一些文本编辑器插件,弹窗插件,第三方框架的全家桶的一批插件的引入。