HTML5 script元素async、defer异步加载使用介绍

我对HTML5充满热情的原因之一在于它实现了许多期待已久的特性，解决了我们过去在网页开发中所面临的挑战。在过去，我们经常需要在输入框中显示空白提示，或是让整块内容都变得可点击，而这些功能通常都需要借助JavaScript来实现。随着WebKit为HTML5引入了新的特性，我们可以更轻松地实现这些功能。

其中，async和defer这两个HTML属性为我们提供了强大的异步加载脚本的能力，使得网页加载速度大大提升。这两个属性让我们的脚件无需同步加载，从而避免了阻塞页面加载的问题。这在浏览器HTML源文件时尤为重要，因为传统的脚本加载方式会导致浏览器在下载脚本期间停止其他所有工作，包括HTML、执行其他脚本以及展示CSS布局。即使Webkit预加载扫描程序能够尝试进行多线程下载，但在某些情况下，网络延迟仍然是一个问题。

那么，如何运用这两个属性呢？其实非常简单。只需在script标签中添加async或defer属性即可。例如：

```html

```

async和defer属性的主要区别在于它们的执行时机。带有async属性的脚本在下载完成后会立即执行，其执行时间一定在window的load事件触发之前。这意味着多个async脚本可能不会按照它们在页面中的出现顺序执行。而带有defer属性的脚本则会在DOM完成后，按照它们在HTML页面中的出现顺序依次执行，执行时机为document的DOMContentLoaded事件触发之前。

对于支持这些属性的浏览器，除了基于Webkit的新版本浏览器外，FireFox已经支持defer和onload属性很长时间了，并且从FF3.6版本开始添加了async属性。IE浏览器同样支持defer属性，但还不支持async属性。从IE9版本开始，onload属性也将被支持。

async和defer属性对于提升网页性能具有重大意义。对于那些希望提高网页加载速度的开发者来说，这无疑是一个令人振奋的消息。无需再担心因脚本同步加载而导致的页面阻塞问题，我们可以更轻松地让网页呈现出最佳的用户体验。这无疑是对每个网站来说都是一个巨大的性能提升。看到webkit实现async属性，我为此欢欣鼓舞！