拒绝js阻塞—defer、async作用和区别分析

js阻塞原理

浏览器内核可以分成两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分,但随着 JS 引擎越来越独立,内核也成了渲染引擎的代称(下文我们将沿用这种叫法)。渲染引擎又包括了 HTML 解释器、CSS 解释器、布局、网络、存储、图形、音视频、图片解码器等等零部件。

JS 引擎是独立于渲染引擎存在的。我们的 JS 代码在文档的何处插入,就在何处执行。当 HTML 解析器遇到一个 script 标签时,它会暂停渲染过程,将控制权交给 JS 引擎。JS 引擎对内联的 JS 代码会直接执行,对外部 JS 文件还要先获取到脚本、再进行执行。等 JS 引擎运行完毕,浏览器又会把控制权还给渲染引擎,继续 CSSOM 和 DOM 的构建。 因此与其说是 JS 把 CSS 和 HTML 阻塞了,不如说是 JS 引擎抢走了渲染引擎的控制权。

渲染引擎碰到js就交出大权是因为他不知道js的内容会不会对接下来的渲染有没有影响。但是我们引入js的时候是知道有没有影响的,可以根据具体情况用三种方式之一加载js。

JS的三种加载方式

js 有三种加载方式。

  1. 正常模式
<script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

  1. async模式
<script async src="script.js"></script>

有 async,script.js会被异步加载,即加载和渲染后续文档元素的过程将和 script.js 的加载并行进行(异步)。当 script.js加载完整立即执行script.js。执行script.js时,html解析暂停。
从加载完成立即执行来看,async模式 执行顺序与写的顺序无关,不保证执行顺序。

  1. defer 模式
<script defer src="index.js"></script> 

有 defer,script.js会被异步加载,即加载和渲染后续文档元素的过程将和 script.js 的加载并行进行(异步)。这一点与async模式一致。
不同的是当 script.js加载完成并不会立即执行,而是在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。因此它会按照写的顺序执行。

三种方式的直观对比

一图胜千言: 原图地址

来个demo

// html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>defer-async</title>

    <script type="text/javascript" async src='./async1.js'></script>
    <script type="text/javascript" async src='./async2.js'></script>
    <script type="text/javascript" src='./normal.js'></script>
</head>
<body>
    <div id="warp">warp</div>
</body>
</html>

然后 async1.js 文件巨大(到底有多大,我是把jquery的压缩版拷进来了),然后最后加上 console.log('async1');
文件async2.jsnormal.js 中分别是 console.log('async2');console.log('normal');
打开网页控制台显示如下: async2 先加载完成就先执行了。

而当我把 前面引用换成defer时


    <script type="text/javascript" defer src='./defer1.js'></script>
    <script type="text/javascript" defer src='./defer2.js'></script>
    <script type="text/javascript" src='./normal.js'></script>

同理,defer1.js 里放了jquery的压缩版源码。defer2.js里只放了一句日志; 刷新网页看下日志:

defer1 、defer2还是按照顺序执行的。

把async、defer都加上,

    <script type="text/javascript" async src='./async1.js'></script>
    <script type="text/javascript" async src='./async2.js'></script>

    <script type="text/javascript" defer src='./defer1.js'></script>
    <script type="text/javascript" defer src='./defer2.js'></script>
    <script type="text/javascript" src='./normal.js'></script>

日志如下:

这个顺序应该不是固定的,符合normal最早,defer1会在 defer2之前的规矩。 至于async 和 defer的前后则要看本身js的加载以及dom树的构建时机吧。

三种方式适合什么时候用

growingwiththeweb 推荐优先级依次是 async defer normal。。

  • 当你的js是个独立的模块且不依赖任何js,使用 async;
  • 如果你的js依赖其他js或者被其他js 依赖,使用 defer;
  • 如果你对js文件很小且被 async script 依赖,使用正常模式的script且放在async script 前面。

可能的坑

虽然理论上defer按加载顺序执行,但也有同学反映事实上并不是这样。。比如这位同学的问题:

我认为这是涉及到 event loop的 task和微任务了。
"在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。" 《JavaScript 高级程序设计(第三版)》如是说,所以脚本之间有依赖,最好使用一个异步脚本吧。比如上面同学那个问题 可以改成这样<script src="1.js"></script>.

参考资料

掘金小册
async vs defer
谈谈script标签
defer async区别


贝贝的前端
爱健身的前端狗
1 篇内容引用
317 声望
24 粉丝
0 条评论
推荐阅读
shell 脚本常用命令
我们要学会用工具解放双手,比如批量给文件夹下某些文件建立软链接,我们可以写个脚本实现。下面记录这个工程中用到的一些命令。变量定义变量时,变量名不加美元符号 {代码...} 使用变量使用一个定义过的变量,只...

侯贝贝阅读 2k

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.3k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.9k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20.1k评论 9

317 声望
24 粉丝
宣传栏