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

1、html5 script元素async、defer异步加载使用介绍异步加载,可以理解为无堵塞并发处理，过去我们用法各种javascript技巧来做这种事情，现在webkit为html5实现了script标签的async异步属性，感爱好的伴侣可以了解下(译者注: 异步加载,可以理解为无堵塞并发处理.) 我对于html5感到高兴不已的缘由之一是它实现了众多业界期盼已久的特性。我们向来需要输入框显示空白提醒，但都是用javascript来实现的。我们也想要囫囵块都变成可被点击，也是用法javascript来实现。现在webkit为html5实现了script标签的async异步属性。过去我们用法各种

2、javascript技巧来做这种事情，但现在新的属性让防止堵塞变得相对简单。 async - html属性如我前面提到的，添加async属性十分容易： 复制代码代码如下: 实际上，假如你的javascript以及html结构设计的合理，那么90%的状况下你的script元素可以用法异步加载。 defer - html属性safari 扫瞄器额外添加了defer属性 复制代码代码如下: async 与 defer 的差别webkit官方博客 很好地说明了async 与 defer 的不同-正常状况下，当扫瞄器在解析html源文件时假如碰到外部的script，那么解析过程会暂停，并发送哀求来下载s

3、cript文件，惟独script彻低下载并执行后才会继续执行dom解析。比如：在下载过程中扫瞄器是被阻挡做其他实用的工作的，包括 解析html，执行其他脚本，以及展示css布局。虽然webkit预加载扫描程序可以探测性地在下载阶段举行多线程下载，但是某些页面仍然存在很大的网络延迟。当前有无数技术来提升页面显示速度,但都需要额外的代码以及针对特定扫瞄器的技巧。现在，script可以通过添加async或者defer属性来让脚本不必同步执行，示例如下： 复制代码代码如下: async 和 defer 标注的 script 都不会暂停html解析就立即被下载,两者都支持onload大事回调来解决需要该

4、脚原来执行的初始化。两者的区分在于执行时的不同：async 脚本在script文件下载完成后会立刻执行,并且其执行时光一定在 window的load大事触发之前。这意味着多个async脚本很可能不会按其在页面中的浮现次序挨次执行。与此相对，扫瞄器确保多个 defer 脚本按其在html页面中的浮现挨次依次执行,且执行时机为dom解析完成后，document的domcontentloaded 大事触发之前。 下面展示的是一个需要1秒来下载，以及1秒来解析执行其他操作的例子，我们可以看到囫囵页面载入花了大约2秒钟。 同样的例子，但这次我们指定了script的 defer 属性.由于当defer脚本下载的时候，其他操作可以并行执行，所以也许快了1倍。 -哪些扫瞄器支持async 和 defer同样是上面引用的文章中提到： 除了基于webkit的新版本扫瞄器,firefox已经支持defer和onload属性很长时光了，而且从ff3.6开头添加了async属性。ie同样支持defer属性,但还不支持async属性，从ie9开头，onload属性也将被支持。 aynsc 棒极了！看到webkit实现async我愉快