快速业务通道

常用的script标签:defer和async

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-06
ted) (Supported) (Supported)
async attribute (Supported) 3.6 (1.9.2) 10 – (Supported)
defer attribute (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中

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号