浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性，从字面上来看，二者的功能很好理解，分别是"延迟脚本"和"异步脚本"的作用。然而，以defer为例，一些细节问题可能开发者却并不一定熟悉，比如：有了defer特性的脚本会延迟到什么时候执行；内部脚本和外部脚本是不是都能够支持defer；defer后的脚本除了会延迟执行之外，还有哪些特殊的地方等等。本文结合已有的一些文章以及MDN文档中对两个特性的阐述，对defer和async进行更全面的研究和总结，希望能够帮助开发者更好地掌握这两个特性。

1 引言

在《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》中我们提到过，JavaScript代码的执行会阻塞页面的解析渲染以及其他资源的下载，当然由于JavaScript是单线程语言，那就意味着在正常情况下，一个页面中的JavaScript代码只能按顺序从上到下执行，当然，正如《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》中我们分析的，在某些情况下，比如通过document.write进入脚本或者通过动态脚本技术引入脚本时，JavaScript代码的执行顺序不一定严格按照从上到下的顺序，而defer和async也是我们所说的"非正常的情况"。

我们经常会说JavaScript的执行具有阻塞性，而在实际的开发中，我们通常最关心的阻塞，同时也是最影响用户体验的阻塞应该是以下几个方面：

[1]页面解析和渲染的阻塞

[2]我们写的页面初始化脚本(一般是监听DOMContentLoaded事件所绑定的脚本，这部分脚本是我们希望最先执行的脚本，因为我们会把和用户交互最相关的代码写在这里)

[3]页面外部资源下载的阻塞(比如图片)

如果我们有一个耗时的脚本操作，而这段脚本又阻塞了上面我们提到的这三个地方，那么这个网页的性能或者用户体验就非常差了。

defer和async这两个特性的初衷也是希望能够解决或者缓解阻塞对于页面体验的影响，下面我们就来分析一下这两个特性，我们主要从以下几个方面来全方位了解这两个特性：

[1]延迟或异步的脚本的执行时机是什么时候？对于页面的阻塞情况如何？

[2]内部脚本和外部脚本是否都能够实现延迟或异步？

[3]浏览器对这两个特性的支持情况如何？有没有相关的bug？

[4]使用了这两个特性的脚本在使用时还有什么需要注意的地方？

2 defer特性

2.1 关于defer脚本的执行时机

defer特性是HTML4规范中定义的扩展特性，最初只有IE4+和firefox3.5+才支持，之后chrome等浏览器也增加了对它的支持，使用的方式为defer="defer"。defer意为延迟，也就是会延迟脚本的执行。正常情况下，我们引入的脚本会被立即下载和执行，而有了defer特性之后，脚本下载完毕后不会立即执行，而是等到页面解析完毕之后再执行。我们看一下HTML4标准对defer的阐述：

defer：When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (e.g., no "document.write" in javascript) and thus, the user agent can continue parsing and rendering.

也就是说，如果设置了defer，那么就告诉用户代理，这个脚本不会产生任何文档内容，从而用户代理可以继续解析和渲染。我们再看一下MDN中对defer的关键描述：

defer：If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.

通过标准中的定义，我们可以明确，即：defer的脚本不会阻塞页面的解析，而是等到页面解析结束之后再执行，但是耗时的defer依然可能会阻塞外部资源的下载，那么它会阻塞DOMContentLoaded事件么？事实上，defer的脚本依然是在DOMContentLoaded事件之前执行的，因此它还是会阻塞DOMContentLoaded中的脚本。我们可以通过下图来帮助理解defer脚本的执行时机：

根据标准中的定义，内部脚本不支持defer，而IE9及以下的浏览器则提供了内部脚本的defer支持。

2.2 defer的浏览器支持情况

下面我们来看一下defer特性的浏览器支持情况：

IE9及以下的浏览器存在一个bug，这个bug将在稍后的DEMO中进行详细的说明。

2.3 DEMO：defer特性的功能验证

我们模仿在Olivier Rochard在《the script defer attribute》使用的方式来验证一下defer特性的功能：

首先我们准备了6个外部脚本：

1.js：

test += "我是head外部脚本\n";

2.js

test += "我是body外部脚本\n";

3.js

test += "我是底部外部脚本\n";

defer1.js

test += "我是head外部延迟脚本\n";

defer2.js

test += "我是body外部延迟脚本\n";

defer3.js

test += "我是底部外部延迟脚本\n";

HTML中的代码为：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>defer attribute test</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">var test = "";</script>
<script src="defer1.js" type="text/javascript" defer="defer"></script>
<script src="1.js" type="text/javascript"></script>
<script defer="defer">
test += "我是head延迟内部脚本\n";
</script>
<script>
test += "我是head内部脚本\n";
</script>
</head>
<body>
<button id="test">点击一下</button>
<script src="defer2.js" type="text/javascript" defer="defer"></script>
<script src="2.js" type="text/javascript"></script>
</body>
<script src="defer3.js" type="text/javascript" defer="defer"></script>
<script src="3.js" type="text/javascript"></script>
<script>
$(function(){
test += "我是DOMContentLoaded里面的脚本\n";
})
window.onload = function(){
test += "我是window.onload里面的脚本\n";
var button = document.getElementById("test");
button.onclick = function(){
alert(test);
}
}
</script>
</html>

代码中，为了方便实现DOMContentLoaded事件，我们引入了jQuery(之后的文章还会再介绍如何自己实现兼容的DOMContentLoaded)，然后，我们在脚本的head内、body内部和body外部分别引入延迟脚本和正常脚本，并且通过一个全局的字符串来记录每一段代码的执行状态，我们看一下各个浏览器中的执行结果：

IE7 IE9 IE10 CHROME firefox

我是head外部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是head延迟内部脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head外部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是head延迟内部脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head外部脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本
我是head外部脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本

 
我是head外部脚本
我是head延迟内部脚本
我是head内部脚本
我是body外部脚本
我是底部外部脚本
我是head外部延迟脚本
我是body外部延迟脚本
我是底部外部延迟脚本
我是DOMContentLoaded里面的脚本
我是window.onload里面的脚本

从输出的结果中我们可以确定，只有IE9及以下浏览器支持内部延迟脚本，并且defer后的脚本都会在DOMContentLoaded事件之前触发，因此也是会堵塞DOMContentLoaded事件的。

2.4 DEMO：IE<=9的defer特性bug

从2.3节中的demo可以看出，defer后的脚本还是能够保持执行顺序的，也就是按照添加的顺序依次执行。而在IE<=9中，这个问题存在一个bug：假如我们向文档中增加了多个defer的脚本，而且之前的脚本中有appendChild，innerHTML，insertBefore，replaceChild等修改了DOM的接口调用，那么后面的脚本可能会先于该脚本执行。可以参考github的issue：https://github.com/h5bp/lazyweb-requests/issues/42

我们通过DEMO验证一下，首先修改1.js的代码为(这段代码只为模拟，事实上这段代码存在极大的性能问题)：

document.body.innerHTML = "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
document.body.innerHTML += "<div id='div'>我是后来加入的</div>";
alert("我是第1个脚本");

2.js

alert("我是第2个脚本");

修改HMTL中的代码为：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>defer bug in IE=9 test</title>
<script src="1.js" type="text/javascript" defer="defer"></script>
<script src="2.js" type="text/javascript" defer="defer"></script>
</head>
<body>
</body>
</html>

正常情况下，浏览器中弹出框的顺序肯定是：我是第1个脚本-》我是第2个脚本，然而在IE<=9中，执行结果却为：我是第2个脚本-》我是第1个脚本，验证了这个bug。

2.5 defer总结

在总结之前，首先要说一个注意点：正如标准中提到的，defer的脚本中不应该出现document.write的操作，浏览器会直接忽略这些操作。

总的来看，defer的作用一定程度上与将脚本放置在页面底部有一定的相似，但由于IE<=9中的bug，如果页面中出现多个defer时，脚本的执行顺序可能会被打乱从而导致代码依赖可能会出错，因此实际项目中很少会使用defer特性，而将脚本代码放置在页面底部可以替代defer所提供的功能。

3 async特性

3.1 关于async脚本的执行时机

async特性是HTML5中引入的特性，使用方式为：async="async"，我们首先看一下标准中对于async特性的相关描述：

async：If the async attribute is present, then the script will be executed asynchronously, as soon as it is available.

需要指出，这里的异步，指的其实是异步加载而不是异步执行，也就是说，浏览器遇到一个async的script标签时，会异步的去加载(个人认为这个过程主要是下载的过程)，一旦加载完毕就会执行代码，而执行的过程肯定还是同步的，也就是阻塞的。我们可以通过下图来综合理解defer和async：

这样来看的话，async脚本的执行时机是无法确定的，因为脚本何时加载完毕也是不确定的。我们通过下面的demo来感受一下：

async1.js

alert("我是异步的脚本");

HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>async attribute test</title>
<script src="/delayfile.php?url=http://localhost/js/load/async1.js&delay=2" async="async" type="text/javascript"></script>
<script>
alert("我是同步的脚本");
</script>
</head>
<body>
</body>
</html>

这里我们借用了《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序》中的delayfile脚本来提供了一个延迟，这个脚本在支持async的浏览器中，弹框的顺序一般是：我是同步的脚本-》我是异步的脚本。

3.2 async的浏览器支持情况

下面我们来看一下async特性的浏览器支持情况：

可以看到，只有IE10+才支持async特性，opera mini不支持async特性，另外，async是不支持内部脚本的。

3.3 async总结

async指的异步脚本，即脚本异步加载，加载的过程不会造成阻塞，但是async的脚本的执行时机是不确定的，而且执行的顺序也是不确定的，因此使用async的脚本应该是不依赖于任何代码的脚本(比如第三方统计代码或广告代码)，否则就会导致执行出错。

4 defer和async的优先级问题

这一点比较好理解，标准中规定了：

[1]如果<script>元素同时定义了defer和async特性，则按async来处理（注意：对于不支持async的浏览器会直接忽略async特性）

[2]如果<script>元素只定义了defer，则按延迟脚本的方式处理

[3]如果<script>元素没有定义defer也没有定义async，则按正常情况处理，即：脚本立即加载和执行

赞 (0)

相关推荐

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • Javascript中的async awai的用法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享async / await是如何工作的,阅读本文前,希望你具备Promise.generator.yield等ES6的相关知识. 在详细介绍async / await之前,先回顾下目前在ES6中比较好的异步处理办法.下面的例子中数据请求用Node.js中的request模块,数据接口采用Github v3

  • JavaScript无阻塞加载和defer、async详解

    JavaScript无阻塞加载和defer、async详解

    无阻塞加载 把js放在head里,浏览器是怎么去执行它的呢,是按顺序加载还是并行加载呢?在旧的浏览器下,都是按照先后顺序来加载的,这就保证了加载的js依赖不会发生问题.但是少部分新的浏览器已经开始允许并行加载js了,也就是说可以同时下载js文件,但是还是按先后顺序执行文件的. 下载是异步的没问题,但是每个javascript执行的时候还是同步的,就是先出现的script标签一定是先执行,即使是并行下载它是最后一个下载完成的,除非标有defer的script标签.任何javascript在执行的时

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • JavaScript中使用Async实现异步控制

    async官方DOC 介绍 node安装 npm install async --save 使用 var async = require('async') js文件 github.com/caolan/asyn- async提供了很多函数用于异步流程控制,下面是async核心的几个函数,完整的函数请看async官方DOC async.map(['file1','file2','file3'], fs.stat, function(err, results) { // results is now

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 理解javascript async的用法

    写在前面 本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的async,也会与大家分享下本人对于thunk库与co库的理解.实现的效果:顺序读取出a.txt与b.txt,将读出的内容拼接成为一个字符串. 同步读取 const readTwoFile = () => { const f1 = fs.readFileSync('./a.txt'), f2 = fs.readFileSync('./b.txt'); return Buffer.concat([f1, f2]).

  • 关于Javascript中defer和async的区别总结

    关于Javascript中defer和async的区别总结

    首先来看看这三句话: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行. <script async src="script.js"></script> 有 async,加载和渲染后续文档元素的过程将和

  • 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异步脚本"的作用.然而,以defer为例,一些细节问题可能开发者却并不一定熟悉,比如:有了defer特性的脚本会延迟到什么时候执行:内部脚本和外部脚本是不是都能够支持defer:defer后的脚本除了会延迟执行之外,还有哪些特殊的地方等等.本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对de

  • 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及其他的细节问题.而除了defer和async特性,动态脚本和Ajax脚本注入也是两种常用的创建无阻塞脚本的方法.总的来看,这两种方法都能达到脚本加载不影响页面解析和渲染的作用,但是在不同的浏览器中,这两种技术所创建的脚本的执行时机还是有一定差异,今天我们再来探讨一下通过动态脚本技术和Ajax注入的脚本在这些方

  • JS脚本加载后执行相应回调函数的操作方法

    项目中经常会遇到这样的问题:当某个 js 脚本加载完成后再执行相应任务,但很多朋友可能并不知道怎么判断我们要加载的 js 文件是否加载完成,如果没有加载完成我们就调用 js 文件里面的函数是不会成功的.本文主要讲解怎么在成功加载 js 文件后再执行相应回调任务. 基本思路 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢?因为有些函数需要在脚本加载完成才能调用.IE 浏览器中可以使用 <script> 元素的

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • 5种JavaScript脚本加载的方式

    javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知javaScript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行javaScript代码,然后再继续解析和渲染页面.同样的情况也发生在使用 src 属性加在javaScript的过程中(即外链 javaScript)

  • JavaScript提高加载和执行效率的方法

    前言 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响. 一个典型的例子就是在页面中使用document.write() . JavaScript 代码内嵌示例 <html> <head> <title>Sourc

  • javascript页面加载完执行事件代码

    复制代码 代码如下: <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成                 document.onreadystatechange = function () {                    if(document.readyState=="complete") {                       

  • JavaScript异步加载浅析

    前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

  • JavaScript异步加载问题总结

    同步加载的问题 默认的js是同步加载的,这里的"加载"可以理解成是解析.执行,而不是"下载",在最新版本的浏览器中,浏览器对于代码请求的资源都是瀑布式的加载,而不是阻塞式的,但是js的执行总是阻塞的.这会引起什么问题呢?如果我的index页面要加载一些js,但是其中的某个请求迟迟得不到响应,于是阻塞了后面的js代码的执行(同步加载),同时页面渲染也不能继续(如果js引入是在head标签后). <script type="text/javascript

  • JavaScript 文件加载与阻塞问题之性能优化案例详解

    JavaScript 文件加载与阻塞问题之性能优化案例详解

    上来先给一个问题:在书写html页面时,当你要从外部引入js文件时,script标签会放置在哪个位置呢,放置位置不同对页面加载有影响吗? 默认情况下,浏览器是同步加载 JavaScript 脚本:即渲染引擎遇到 script 标签就会停下来,等到执行完脚本,再继续向下渲染.如果是外部脚本,还必须加入脚本下载的时间. 如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器"卡死",出现短暂的空白,没有任何响应.这会造成很不好的用户体验,解决这个问题有两种方案:

随机推荐