使用async属性异步加载执行JavaScript
source link: https://blog.p2hp.com/archives/9948
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
属性的异步加载、执行能力一定会让网站的页面速度增色不少。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK