script标签异步加载,script的async和defer哪个先执行

　　(译者注：异步加载可以理解为非阻塞并发处理。)

　　我对HTML5感到兴奋的原因之一是，它实现了许多业界期待已久的功能。我们总是需要输入框显示空白提示，但都是用JavaScript实现的。我们还希望整个块是可点击的，也使用JavaScript。

　　现在WebKit为HTML5实现了SCRIPT标签的async异步属性。我们过去使用各种JavaScript技术来做这种事情，但是现在新的属性使得防止阻塞变得相对容易。async - HTML属性

　　正如我前面提到的，添加异步属性非常简单：复制代码代码如下：

　　！-指定异步和在线加载回调-

　　脚本异步src= site script . js onload= myInit()/script

　　事实上，如果JavaScript和HTML结构设计得当，90%的脚本元素都可以异步加载。defer - HTML属性

　　Safari在浏览器中添加了defer属性。复制代码如下：

　　！-指定defer，效果类似于async-

　　脚本延迟src= site script . js onload= myInit()/script

　　异步和延迟的区别

　　WebKit的官方博客解释了async和defer的区别。

　　-

　　正常情况下，浏览器在解析HTML源文件时遇到外部脚本时，会暂停解析过程，并发送下载脚本文件的请求。只有在脚本完全下载并执行之后，DOM解析才会继续。例如：

　　script src= myblockingscript . js /script

　　在下载过程中，浏览器无法执行其他有用的工作，包括解析HTML、执行其他脚本和显示CSS布局。虽然Webkit preload scanner在下载阶段可以试探性的下载多线程，但是有些页面还是有很大的网络延迟。

　　目前提高页面显示速度的技术有很多，但都需要针对特定浏览器额外的代码和技巧。现在，通过添加async或defer属性，脚本可以使同步执行变得不必要。示例如下：复制代码代码如下：

　　script async src= myasync script . js onload= myInit()/script

　　脚本延迟src= mydeferscript . js onload= myInit()/script

　　标记为async和defer的脚本会在不暂停HTML解析的情况下立即下载，并且它们都支持onload事件回调，以解决需要脚本执行的初始化。

　　两者的区别在于执行力的不同：

　　异步脚本将在脚本文件下载后立即执行，其执行时间必须在窗口的load事件被触发之前。这意味着多个异步脚本可能不会按照它们在页面上出现的顺序执行。

　　相反，浏览器保证多个defender脚本按照在HTML页面中出现的顺序依次执行，执行时间在DOM解析完成之后，触发文档的DOMContentLoaded事件之前。

　　下面是一个用1秒钟下载，1秒钟解析和执行其他操作的例子。我们可以看到，加载整个页面大约需要2秒钟。

　　同样的例子，但是这次我们指定了脚本的defender属性。因为下载defender脚本时可以并行执行其他操作，所以大约快1倍。

　　-

　　哪些浏览器支持异步和延迟？

　　上面引用的文章中还提到：

　　除了基于Webkit的新版本浏览器，火狐很早就支持defer和onload属性，从FF3.6开始增加了async属性，IE也支持defender属性，但目前还不支持async属性。从IE9开始，onload属性也将得到支持。

　　Aynsc太棒了！

　　我很高兴看到webkit实现了async，笑得合不拢嘴。对于每个网站来说，阻塞都是一个巨大的性能瓶颈，直接指定脚本文件的异步加载无疑会加快网页的速度。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。