找回密码
 注册

[JS] js script async defer 实现异步加载的相同点和区别

php 发表于 2014/8/10 16:32 | 显示全部楼层 |阅读模式
对于使用<script>标签加载外部js文件,HTML5可以用async属性来指定异步加载javascript外部脚本,不支持HTML5的浏览器异步加载js需要defer属性。
当同时出现了async属性和defer属性,并且浏览器也支持的时候,会优先使用async属性。所以为了实现兼容,需要将async和defer都写上。
  1. <script async="async" defer="defer" src="xx.js"></script>
复制代码
或者
  1. <script async defer src="xx.js"></script>
复制代码
async 和 defer 的区别在于:
  • 如果出现了async属性并且浏览器支持,则会异步加载外部脚本文件,
    加载完后再执行脚本中的代码,执行时机在window对象的load事件触发之前,
    多个具有async属性的script元素并不一定执照他们在文档中出现的顺序依次执行,而是取决于谁先加载完。
  • 如果没有出现async属性而出现了defer属性,
    则所有具有defer属性的script元素会按在文档中出现的顺序依次加载完后执行,
    执行时机是在DOM元素解析完成之后,document的DOMContentLoaded事件触发之前。

async 和 defer 的相同点在于:
  • 都实现了外部脚本文件的异步加载执行,异步加载不会影响文档中剩余HTML、CSS、JS的解析
  • 只要浏览器支持,文档中剩余部分定义的变量或函数,可以在具有async/defer属性的代码中使用
  • 主流浏览器都支持async属性,IE10+支持async属性,但Opera 12及更早版本不支持defer

对于既没有async属性也没有defer属性的<script>元素,也就是普通的js加载外部脚本文件来说,浏览器会先下载外部脚本文件,然后解析脚本文件中的代码,文档中剩余部分HTML、CSS、JS的解析会一直等待直到前面的脚本文件下载解析完成。

手机版|轻松E站

轻松E站

快速回复 返回顶部 返回列表