js异步加载 defer和async 比较

网上说法很多，很少一句话能总结清楚的，终于找到两句一针见血的描述，很到位：

 

相同点：都不阻塞DOM解析

 

defer  ：顺序：保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载），待文档解析完成之后，执行脚本。

 

async  ：顺序：不保证先后顺序。解析：HTML 解析器遇到它们时，不阻塞（脚本将被异步下载，一旦下载完成，立即执行它），并继续解析之后的文档。

 

总结一下：defer 效果是 ：js异步下载完毕后且DOM解析完成后且DOMContentLoaded 事件触发之前按照按页面脚本出现次序顺序从上至下依次执行！

              async 效果是：哪个js先下载就先执行，不按页面脚本出现次序顺序，js的执行一定是在 window的load事件触发之前

 

顺便一提：window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载外部资源过多而颇费周折。

              而DOMContentLoaded事件则在形成完成的DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。

 

个人建议：如果加载的JS存在依赖关系，建议使用defer来保证安全，否则使用async即可

              已获得广泛浏览器支持，但使用时需要查询兼容性！

 

转载于:https://www.cnblogs.com/xmyxm/p/5767043.html