html5脚本异步加载_HTML5的异步脚本属性-优快云博客

html5脚本异步加载

One of the big reasons I'me excited about HMTL5 is that features are being implemented that have been long overdue. We've been using placeholders forever but we've needed to use JavaScript to do it. We've been making entire blocks clickable like links but we've needed to use JavaScript to do it. WebKit recently implemented HTML5's async attribute for SCRIPT tags. We've been accomplishing this task with a variety of JavaScript hacks but this new attribute will allow us to prevent blocking in an easy way.

我对HMTL5感到兴奋的一大原因是，早就应该实现的功能正在实施中。我们一直在使用占位符，但是我们需要使用JavaScript来实现。我们一直在使整个块像链接一样可点击，但是我们需要使用JavaScript来实现。 WebKit最近为SCRIPT标签实现了HTML5的async属性。我们已经通过各种JavaScript技巧来完成此任务，但是这个新属性将使我们能够轻松地防止阻塞。

异步-HTML (async - The HTML)

As I mentioned above, it's as easy as adding an attribute:

如上所述，就像添加属性一样简单：


<script async src="siteScript.js" onload="myInit()"></script>

The truth is that if you write your JavaScript effectively, you'll use the async attribute to 90% of your SCRIPT elements.

事实是，如果您有效地编写JavaScript，则将对90％的SCRIPT元素使用async属性。

延迟-HTML (defer - The HTML)

Safari has also added a defer attribute:

Safari还添加了一个defer属性：


<script defer src="siteScript.js" onload="myInit()"></script>

Very similar to the async assignment.

与async分配非常相似。

异步和延迟-有什么区别 (async & defer - What's the Difference)

This WebKit blog post explains the difference between defer and async best:

这篇WebKit博客文章解释了defer和async best之间的区别：

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) that async 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's DOMContentLoaded event.

async脚本和defer脚本都立即开始下载，而不会暂停解析器，并且都支持可选的onload处理程序，以解决执行依赖于脚本的初始化的常见需求。 async和defer之间的差异集中在脚本执行的时间。每个async脚本在完成下载后以及在窗口的加载事件之前会首先执行。这意味着async脚本有可能(并且有可能)没有按照它们在页面中出现的顺序执行。另一方面，确保按以下顺序执行defer脚本：它们在页面中出现的顺序。该执行在解析完全完成之后但在文档的DOMContentLoaded事件之前开始。

谁支持异步和延迟？ (Who Supports async and defer?)

Also from the Safari blog:

同样来自Safari博客：

In addition to upcoming versions of WebKit-based browsers, Firefox has long supported the defer and onload attributes and support for async was added in version 3.6. Internet Explorer has also long supported the defer attribute. While async is not yet supported, support for the onload attribute was added in version 9.

除了即将发布的基于WebKit的浏览器版本外，Firefox长期以来一直支持defer和onload属性，并且在3.6版中添加了对异步的支持。 Internet Explorer长期以来也支持defer属性。虽然尚不支持异步，但在版本9中添加了对onload属性的支持。

异步FTW！ (async FTW!)

Seeing that WebKit had implemented async put a huge smile on my face. Blocking is a huge bottleneck for every website and the ability to easily direct a script to load asynchronously should speed up the web!

看到WebKit实现了async ，我的脸上露出了灿烂的笑容。阻塞是每个网站的巨大瓶颈，轻松引导脚本异步加载的功能应该可以加快网站速度！