HTML5特性:使用async属性异步加载执行JavaScript
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的。比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的async
属性,使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载。
async – HTML代码
真的非常简单,就像下面这样:
<script async src="siteScript.js" onload="myInit()"></script>
事实上,如果你是个有严谨精神的程序员,你应该在你90%以上的SCRIPT
标记上使用async
属性。
defer – HTML代码
还有一个跟async
属性相似的defer
属性:
<script defer src="siteScript.js" onload="myInit()"></script>
跟async
属性的在语法上非常相似。
async & defer – 不同之处
这篇WebKit博客将defer
和async之间
的不同之处解释的非常清楚:
浏览器对标记有
async
属性或defer
属性的scripts会立即加载并解析,同时也会支持依赖于这个脚本进行初始化的onload事件。async
属性和defer
属性的不同之处在于何时执行这个脚本。标注有async
属性的Script会在下载完成后即可执行,不需要等待window的load事件。这意味着标记有async
属性的脚本并不一定会按在页面中嵌入的顺序执行。而标记有defer
属性的脚本却一定会按它们在页面上的顺序依次执行。执行会在解析完全完成后开始,但会在document的DOMContentLoaded
事件之前。
支持 async 和 defer 属性的浏览器有哪些?
引用Safari博客上的话:
WebKit引擎的浏览器(谷歌浏览器和Safari浏览器)。火狐浏览器从3.6版开始支持async 和 defer 属性。IE也很早就支持 defer 属性,但对async属性不支持,在IE9中支持onload属性。
async 太有用了!
看到各浏览器实现async
功能着实让我非常高兴。浏览器网站页面时被JavaScript卡住的确是个很大的问题,async
属性的异步加载、执行能力一定会让网站的页面速度增色不少。
HTML5特性:使用async属性异步加载执行JavaScript的更多相关文章
- 使用async属性异步加载执行JavaScript
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的.比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现.而HTML5里给Ja ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- HTML5 <script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- 【HTML5 】<script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
- javascript异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- [转载]Javascript 同步异步加载详解
http://handyxuefeng.blog.163.com/blog/static/4545217220131125022640/ 本文总结一下浏览器在 javascript 的加载方式. 关键 ...
随机推荐
- TFS 2010 使用手册(四)备份与恢复
本文参考了http://developer.51cto.com/art/201010/229066.htm的文章. TFS的备份与恢复一直没有很完整的解决方案,要完成一个很好的备份要有很多的手动步骤才 ...
- 【Java的JNI快速学习教程】
1. JNI简介 JNI是Java Native Interface的英文缩写,意为Java本地接口. 问题来源:由于Java编写底层的应用较难实现,在一些实时性要求非常高的部分Java较难胜任(实时 ...
- CSS3实战手册(第3版)(影印版)
<CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...
- a different object with the same identifier value was already associated withthe session异常解决方案
异常信息: org.hibernate.NonUniqueObjectException: a different object with the same identifier value was ...
- POJ 3259 Wormholes (最短路)
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34302 Accepted: 12520 Descr ...
- 使用Boost asio实现同步的TCP/IP通信
可以先了解一下Boost asio基本概念,以下是Boost asio实现的同步TCP/IP通信: 服务器程序部分,如果想保留套接字之后继续通信,可以动态申请socket_type,保存指针,因为so ...
- 解决tsc.exe 已退出 代码为 1
最近从ABP上面下载一个项目,然后用VS2015编译后报错,在Web项目下ABP---Framework---scripts下面多了一个abp.d.ts,报了一大堆错误 上网一查,d.ts是TypeS ...
- 在Eclipse中导入文件和文件夹
一. 将JAVA文件夹导入Eclipse中的方法: 方法一:直接将java文件夹复制,然后粘贴到项目下: 方法二:(1)打开Eclipse,点击项目的空白处,现在import: (2)现在Existi ...
- 修复浏览器不支持Array自带的indexOf方法的扩展
JavaScript中Array的indexOf方法支持的浏览器有:IE9+.Firefox 2+.Safari 3+.Opera 9.5+和Chrome 如果想要在不支持的浏览器中使用indexOf ...
- MySQL之学生名次问题
--对输入的数据进行约束create table t(studentID char(10), [name] varchar(8), startDate char(10) Check (isdate(s ...