async和DOM Script文件加载比较

将async属性与script动态加载在页面渲染和load加载方面的影响，同时使用demo.js和sleep.php文件作为示例。

一、常规script标签加载

在浏览器加载情况如下：

1. 下载会阻塞DomReady，即DOM结构完成之前，浏览器会等待所有script标签的脚本下载完成。

2. 执行同样会阻塞DomReady，即脚本下载完成后，浏览器会执行这些脚本，直到执行完毕才会继续渲染页面。

二、使用async属性

async是HTML5新增属性，能够异步下载脚件，不阻塞DOMready。每个带有async属性的脚本在下载结束后立即执行，并且会在window的load事件之前执行。可能会出现脚本执行顺序被打乱的情况。

支持async属性的浏览器包括：Firefox 3.6+、IE 10+、Chrome 2+、Safari 5+、iOS 5+和Android 3+。在浏览器中加载的情况如下：

1. 异步下载不阻塞DomReady，但会阻塞load事件。

2. 执行阻塞load事件。

3. 在IE9中，不支持async属性，下载会阻塞DomReady。

三 、使用DOM Script动态加载

文档对象模型（DOM）允许您使用JavaScript动态创建HTML的几乎全部文档内容。与页面其他元素一样，script元素也可以非常容易地通过标准DOM函数创建。使用这种方法加载的情况如下：

1. 下载阻塞load事件。

2. 执行阻塞load事件。

3. 在IE9中，不会阻塞load事件。

小结：

async属性和script动态加载在现代浏览器中的加载情况基本一致。async属性使用较为简单，但在兼容性方面，动态加载可能更好。除了这两种方法，异步加载文件还有ajax（受同源限制）、iFrame、img等其他方式。在实际应用中，可以根据需求和场景选择最合适的方式。