脚本引用中使用defer和async用法和区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了脚本引用中使用defer和async用法和区别相关的知识，希望对你有一定的参考价值。
是的，就是在页面脚本引用的时候设置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用法和区别的主要内容，如果未能解决你的问题，请参考以下文章