码迷,mamicode.com
首页 > 其他好文 > 详细

脚本引用中使用defer和async用法和区别

时间:2017-05-17 12:03:53      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:min   是的   中文   name   过程   停止   模块化   底部   ges   

技术分享

是的,就是在页面脚本引用的时候设置defer或者async,为什么会有这两个属相来辅助脚本加载那,因为浏览器在遇到script标签的时候,文档的解析会停止,不再构建document,有时打开一个网页上会出现空白一段时间,浏览器显示是刷新请求状态(也就是一直转圈),这就会给用户很不好的体验,defer和async的合理使用就可以避免这个情况,而且通常script的位置建议写在页面底部(移动端应用的比较多,这两个都是html5中的新属性)。

1.默认引用 script:<script type="text/javascript" src="x.min.js"></script>   

当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。

2.async模式 <script type="text/javascript" src="x.min.js" async="async"></script>

 当浏览器遇到 script 标签时,文档的解析不会停止其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。

3.defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>

 当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行

 

所以async和defer的最主要的区别就是async是异步下载并立即执行,然后文档继续解析,defer是异步加载后解析文档,然后再执行脚本,这样说起来是不是理解了一点了;

它们的核心功能就是异步,那么两种属性怎么去区分什么情况下用哪个那,主要的参考是如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer,如果脚本是模块化的,不依赖于任何脚本,那么则使用 async;主要功能点说完了,小伙伴们有没有分清楚他们的区别了那。

 

脚本引用中使用defer和async用法和区别

标签:min   是的   中文   name   过程   停止   模块化   底部   ges   

原文地址:http://www.cnblogs.com/webxwk/p/6866284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!