使用async属性异步加载执行JavaScript

标签: 技术技巧 async html5 javascript 异步 | 发表时间:2014-05-09 16:43 | 作者:歪脖骇客
分享到:
出处:http://www.webhek.com

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博客deferasync之间的不同之处解释的非常清楚:

浏览器对标记有 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属性的异步加载、执行能力一定会让网站的页面速度增色不少。

相关 [async 异步 javascript] 推荐:

使用async属性异步加载执行JavaScript

- - WebHek
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的. 比如,我以前一直在使用 placeholders,但以前必须要用JavaScript实现. 而HTML5里给JavaScript标记提供的 async属性,使JavaScript能异步加载执行. 之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载.

script的defer和async

- - 携程UED
我们常用的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 vs defer 属性

- - 进步博客
<script>元素的async和defer属性支持度已经不错了,是时候详细了解它们了. <script>脚本不设置任何属性. HTML文档解析过程中,遇到script文档时,会停止解析HTML文档,发送请求获取script文档(如果是外部文档的话). 脚本执行后,才恢复HTMl文档解析.

Javascript异步编程的4种方法

- - 阮一峰的网络日志
你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务. 如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.

Async Http Client 欺骗漏洞 (CVE-2013-7397)

- - 开源中国社区最新新闻
发布日期:2015-06-25. 更新日期:2015-06-25. Async Http Client是异步HTTP及WebSocket客户端Java库. Async Http Client 1.9.0之前版本,会跳过了X.509证书验证,除非keyStore位置及trustStore位置均显式设置.

Atmosphere 1.0:支持Java/JavaScript的异步通信框架

- - InfoQ cn
Atmosphere 1.0是一个新的Java/Scala/Groovy框架,它试图将Web浏览器与应用服务器之间的通信抽象出来. 在Web Socket、HTML5服务器端事件和其他特定于应用服务器的解决方案可用时,该框架可以透明地支持,此外还可将长轮询作为一种备选方案. 最初,Web应用程序是采用客户端/服务器模型构建的,始终由客户端向服务器发起连接.

JavaScript 异步机制及应用 入门教程

- - SegmentFault 最新的文章
异步: asynchronous 简写async. 同步: synchronous 简写sync. 异步就是: N个人同时起跑, 起点和出发时间相同, 在起跑时不去关心其他人会啥时候跑完~尼玛这不废话吗. 大家都才起跑怎么知道别人多就跑完. 同步就是: N个人接力跑, 起点和出发时间不同, 且后一个人会等待前一个人跑完才能继续跑, 也就是要关心前一个人的结果(上一行代码的返回值)..

在 Percona XtraDB Cluster 裡使用 async replication 時人工 failover 的方式…

- - Gea-Suan Lin's BLOG
在使用 Galera Cluster 時還是可以架設一般的 slave server ( Percona XtraDB Cluster 則是 Percona 對 Galera Cluster 的封裝),像是這樣的架構:. 其中 node{1,2} 為 cluster,node3 則是傳統的 async replication,來源的 master 為 node1.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).