浅谈script标签中的async和defer

浅谈script标签中的async和defer

script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。

现在大家习惯于在页面中引用各种的第三方脚本,如果第三方服务商出现了一些小问题,比如延迟之类的,就会使得页面白屏。 好在script提供了两种方式来解决上述问题,asyncdefer,这两个属性使得script都不会阻塞DOM的渲染。 但既然会存在两个属性,那么就说明,这两个属性之间肯定是有差异的。

defer

如果script标签设置了该属性,则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染; 如果有多个设置了deferscript标签存在,则会按照顺序执行所有的scriptdefer脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。

我们做了一个测试页面,页面中包含了两个script标签的加载,给他们都加上defer标识。 P.S. 为了更直观,我们给script1.js添加了1s的延迟,给script2.js添加了2s的延迟。

下图是页面加载的过程&script脚本的输出顺序。 不难看出,虽然script1加载用时虽然比script2短,但因为defer的限制,所以Ta只能等前边的脚本执行完毕后才能执行。

async

async的设置,会使得script脚本异步的加载并在允许的情况下执行 async的执行,并不会按着script在页面中的顺序来执行,而是谁先加载完谁执行。

我们修改测试页面如下:

遂得到了如下的结果,页面加载时长上,并没有什么变化,毕竟都是异步加载的脚本。 但是我们可以看到一个小细节,DOMContentLoaded事件的触发并不受async脚本加载的影响,在脚本加载完之前,就已经触发了DOMContentLoaded

我们接着修改测试页面。加载一个没有延迟的script脚本,使得脚本可以即时的加载完毕。 我们要测试一下,如果async脚本加载的足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async的描述“在允许的情况下执行”的论证)。 同时为了保证测试的稳定性,我们在script脚本引入的后边添加了数千个空的div节点,用来延长文档的渲染时间。

执行结果不出所料,如果给async一定的时间,是有可能在DOMContentLoaded事件之前就执行的。

P.S. 从上图中左上角的火焰图中,我们也能看到,出现了多段的蓝色(更新:晚上写的时候懵了,紫色的才是渲染,蓝色的是解析)文档渲染。以及下边Console的顺序。 说明的确,async的执行是加载完成就会去执行,而不像defer那样要等待所有的脚本加载完后按照顺序执行。

画几张图简要说明

网上有了不少这种类似的图,但是基本都是拿一个script就举例的 未免太过寒酸,so咱们来一个豪华版,来画一下多个脚本加载时的甘特图 就像近年来各大手机厂商,出新机都喜欢来一个X+X plus

拿四个不同的颜色来标明各自代表的含义

普通script

文档解析的过程中,如果遇到script脚本,就会停止页面的渲染进行下载(但是并不会影响后续的解析,解析和渲染是两码事儿)。 资源的下载是在解析过程中进行的,虽说script1脚本会很快的加载完毕,但是他前边的script2并没有加载&执行,所以他只能处于一个挂起的状态,等待script2执行完毕后再执行。 当这两个脚本都执行完毕后,才会继续渲染页面。

defer

文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析&渲染完毕后。 会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。

async

async脚本会在加载完毕后执行。 async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的

推荐的应用场景

defer

如果你的脚本代码依赖于页面中的DOM元素(文档是否渲染完毕),或者被其他脚本文件依赖。 例:

  1. 评论框
  2. 代码语法高亮
  3. polyfill.js

async

如果你的脚本并不关心页面中的DOM元素(文档是否渲染完毕),并且也不会产生其他脚本需要的数据。 例:

  1. 百度统计

如果不太能确定的话,用defer总是会比async稳定。。。

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

测试代码存放处:https://github.com/Jiasm/research-script-tag clone后执行npm start即可运行。 调试推荐使用chrome无痕模式(这样才不会在Performance页签上看到不相关的插件数据)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在CentOS 7上使用InfluxDB分析系统指标

InfluxDB是一个时间序列,指标和分析数据库。时间序列数据库旨在解决存储在一段时间内进行的连续测量所产生的数据的问题。此数据可能包含系统指标(如CPU和内存...

2813
来自专栏云计算教程系列

如何在Ubuntu 14.04上保护WordPress免受XML-RPC攻击

WordPress是一个流行且功能强大的CMS(内容管理系统)平台。它的受欢迎程度可能会以专门针对WordPress网站的恶意流量形式引起不必要的关注。

350
来自专栏美奔科技

web站点应用之路_wdcp面板部署篇(一)

熟悉的人都知道,搭建web几乎是最简单的了,一般有两种方式来搭建web站点.一种是自己先安装各类环境,比如php+apache+mysql ,或者是asp.ne...

2014
来自专栏云计算教程系列

如何在CentOS 7上使用InfluxDB分析系统指标

InfluxDB是一个时间序列,指标和分析数据库。时间序列数据库旨在解决存储在一段时间内进行的连续测量所产生的数据的问题。此数据可能包含系统指标(如CPU和内存...

1481
来自专栏前端人人

React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,...

3206
来自专栏IMWeb前端团队

AppCan——HTMl5移动开发应用平台

AppCan是HTMl5移动开发应用平台,支持跨平台,可以简单、快速、高效开发移动应用。 倡导Hybrid App开发。 为HTML5开发提供底层Native交...

4826
来自专栏Golang语言社区

Golang 通用连接池

资源链接 https://github.com/silenceper/pool pool GoDoc Golang 实现的连接池 功能: 连接池中连接...

3408
来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

10.8K6
来自专栏后端技术探索

nginx 授权资源跨站访问

最近一h5前端同事反馈说某个字体库连接(类似于http://www.example.com/test.ttf)无法访问。

882
来自专栏GIS讲堂

Openlayers4中地图的导出

本文讲述Openlayers4中地图的导出,包括调用天地图切片跨域、Geoserver11 WMS跨域等。

2442

扫码关注云+社区