我们常用的script标签,有两个和性能、js文件下载执行相关的属性:defer和async

defer的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed.

async的含义【摘自https://developer.mozilla.org/En/HTML/Element/Script

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously.

Defer

对于defer,我们可以先思考一个情况。一个页面如果有N个外链的脚本,放在head中,那么,当加载脚本时会阻塞页面的渲染,也就是常说的空白。在简单的开发环境中,我们可能只要将源代码中的外链脚本位置换一下就ok了。可是面对越来越复杂的开发环境,前端同事如果要后台开发同事调整一下脚本的位置,可能会花费大量的沟通成本和开发成本。我在去年的一个项目中就遇到过此类情况,当然也很感谢当时的后台开发同事的配合,他们都辛辛苦苦的调整了脚本的位置,解决了空白的问题。

那么可以让这个成本降到最低吗?那么我们可以使用defer这个属性。

如果一个script加了defer属性,即使放在head里面,它也会在html页面解析完毕之后再去执行,也就是类似于把这个script放在了页面底部。

关于defer有两个demo:

简单介绍一下这个demo,一共引用了3个js和1个css,为了能更好的展示defer的效果,第二个js-2.php是延迟了3秒返回的。1.js会在页面中生成一个值为1的input框,2.php会生成值为2的input框,3.js会生成值为3的input框。一方面我们需要观察页面渲染的时间,另一方面我们也要看一下js是否顺序执行了。

下图是without_defer.html的效果,从瀑布图可以看出,domready和onload的时间都在6s左右,因为需要等待2.php的返回才能渲染页面。如果你访问上面的例子,可以看出,页面要等6s的时间才会呈现出来,6s之前都是空白。

那么如果我们为每个js都加上defer属性,请看下面两张图

第一张是在加载过程中截取的,可以看到一旦有了defer属性,虽然有资源2.php需要等待,但是仍然会继续渲染页面,加载后续的js和css等资源文件。对比上面的情况,可以看到domready的时间明显提前,如果你访问demo地址,会发现页面会照常渲染出来,只不过2.php里面的内容会延迟执行。

从上面的对比可以看出,对于defer,我们可以认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照原本的js的顺序执行,所以如果前后有依赖关系的js可以放心使用。

Async

对于async,这个是html5中新增的属性,它的作用是能够异步的加载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行。那async和defer有什么不同之处呢?我们还是先看async的两个demo

demo的效果和上面描述的一样。

下图是without async的瀑布图,和没有defer的情况是一样的。domready和load的时间都因为一个js的延迟而延迟了。

我们再看一下有async属性的情况,和defer一样,会等待的资源不会阻塞其余资源的加载,也不会影响页面的加载。但是有一点需要注意下,在有async的情况下,js一旦下载好了就会执行,所以很有可能不是按照原本的顺序来执行的。如果js前后有依赖性,用async,就很有可能出错。

Difference

这篇文章中总结了defer和async的相同点和区别。

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) thatasync scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’sDOMContentLoaded event.

Wrapping it up

在上述的基础上,我根据实际使用的情况总结了一下defer和async的特征。
相同点:

  • 加载文件时不阻塞页面渲染
  • 对于inline的script无效
  • 使用这两个属性的脚本中不能调用document.write方法
  • 有脚本的onload的事件回调

区别点:

  • html的版本html4.0中定义了defer;html5.0中定义了async
  • 浏览器
    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) (Supported) (Supported) (Supported)
    asyncattribute (Supported) 3.6 (1.9.2) 10 (Supported)
    deferattribute (Supported) 3.5 (1.9.1) 4 (Supported)
  • 执行时刻
    每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执行。

摘自【http://dev.w3.org/html5/spec/Overview.html#attr-script-async

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

简单的来说,使用这两个属性会有三种可能的情况

  • 如果async为true,那么脚本在下载完成后异步执行。
  • 如果async为false,defer为true,那么脚本会在页面解析完毕之后执行。
  • 如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行,

最后给一点个人的建议,无论使用defer还是async属性,都需要首先将页面中的js文件进行整理,哪些文件之间有依赖性,哪些文件可以延迟加载等等,做好js代码的合并和拆分,然后再根据页面需要使用这两个属性。

本文another链接:http://feifeipan.sinaapp.com/?p=51

=====华丽丽的分割线=========

对于znxds提出的IE下的工作,我针对FF和IE6、IE7、IE8下面做了比较。

demo

Firefox中,inline的defer是没有效果的;outer的defer会在页面最底部执行。

IE8.0中,inline和outer的defer是起作用的,都会延迟到页面底部,排在其他非defer的js后面执行

IE7.0的情况,和IE8.0一致。

IE6.0中,关于defer inline js,要区分是在head中还是在body中。在head中defer inline js会在遇到body之后优先执行,而在body中的defer inline js会在body结束之前执行;关于defer outer js, 依然是在页面最后执行。

所以可以看出,defer的outer js在各种浏览器中表现一致;defer的inline js在IE6中比较特殊,head和body中的顺序不一样,IE7和IE8会延迟到页面底部执行,在Firefox中无效。

本文作者:小灰灰 转载请注明来自:携程UED

http://ued.ctrip.com/blog/?p=3121

http://www.cnblogs.com/AndyWithPassion/archive/2011/09/03/2165441.html

script的defer和async的更多相关文章

  1. <script> 的defer和async

    <script src="../file.js" async="async"></script> file.js---- 仅仅只有ale ...

  2. script标签defer与async的区别

    总结: async 会在文件下载完毕后立即执行 会阻止html parser defer 会下载完以后等html parser结束后执行,保证顺序

  3. javascript的defer和async的区别。

    我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...

  4. defer 和 async 本地对象和宿主对象

    <script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...

  5. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  6. defer和async的区别

    先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...

  7. defer与async

    defer:该属性指定的脚本不会修改DOM,因此代码可以安全的延迟执行. 含defer属性的script标签可以放在任何位置,在页面解析到该script标签时,开始下载脚本,但不会执行脚本,直至DOM ...

  8. defer和async的详细区别

    看过javascript高级程序设计的人,在javascript高级程序设计里,应该看到了介绍了有关defer和async的区别,可是比较浅显,而且也说得不是很清楚.下面我们来通过图片来详细了解下df ...

  9. defer与async的区别

    当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 async,浏览器会立即 ...

随机推荐

  1. PHP相关图书推荐

    PHP和MySQL Web开发(原书第4版) 作      者 [澳] Luke Welling,[澳] Luke Welling 著:武欣 等 译 出 版 社 机械工业出版社 出版时间 2009-0 ...

  2. centos6.3 安装配置redis

    1.下载安装 1.1 下载包 注:在http://download.redis.io/releases查询需要下载的版本 wget http://download.redis.io/releases/ ...

  3. C/C++——C++变量的作用域与生命周期,C语言中变量的作用域和生命周期

    全局变量 作用域:全局作用域(全局变量只需在一个源文件中定义,就可以作用于所有的源文件.) 生命周期:程序运行期一直存在 引用方法:其他文件中要使用必须用extern 关键字声明要引用的全局变量. 内 ...

  4. [转]【eoeAndroid索引】史上最牛最全android开发知识汇总

    一.开发环境搭建 (已完成) 负责人:kris 状态:已完成 所整理标签为:搭建 SDK JDK NDK Eclipse ADT 模拟器 AVD 调试器(DEBUG) DDMS 测试 日志 Logca ...

  5. 【工作备忘】suricata

    因为工作遇到的困难,我向suricata的某个作者发送了邮件. On Wed, Sep 11, 2013 at 8:22 AM, likeyi <929812468@qq.com> wro ...

  6. 本人为项目组制定的一份页面优化指南(easyui页面优化方案)

    #本人为项目组制定的一份页面优化指南(easyui页面优化方案) ##背景 这是一篇我之前为项目组制定的页面优化指南,主要是面向表单页面,典型的像[注册用户](https://passport.cnb ...

  7. poj 1004 Financial Management

    求平均数,记得之前在杭电oj上做过一个求平均数的题目,结果因为题目是英文的,我就懵逼了 #include <stdio.h> int main() { ; double num; int ...

  8. android系统的文件夹选择器

    aFileChooser: https://github.com/iPaulPro/aFileChooser/issues, 这个是最适合android的文件选择器,看看有无可能改成文件夹选择器. f ...

  9. EasyUI DataGrid 窗口大小自适用--------------未测试

    EasyUI 新版本里添加了 fit 属性,不需要老版本的那么复杂,重新load DataGrid.但是昨天用的时间发现只有一个DataGrid的时候用fit:true 很好使,但是如果有其它元素,如 ...

  10. 第三百四十七天 how can I 坚持

    下班的时候眼皮就一直在跳,今天意志好消沉,以后还是少说话,多说不宜啊.. 挣脱束缚,无论怎样,对于生命,什么都是次要的,不要想太多. 最近事比较多,应该是累了,睡一觉 应该就好了. 睡觉,晚安.