标签：defer DOM 标签 script async 浅析 加载

通常我们在编写网页的时候会在html里面引用script标签来添加一些第三方的脚本，在同步的情况下，html必须要按部就班的向下加载，一但碰到了script标签，也必须要强行把他们加载执行完，哪怕是它们是在一个环境很差的服务器上，所以就可能会出现页面加载缓慢，白屏的现象。
这个时候，我们就有两种解决办法，就是async（异步）和defer（延迟）这两种属性，它们可以使script标签不影响后续DOM的渲染。

1. async
浏览器在加载页面时，如果碰到了async，会将带有async的script标签立即进行加载且执行，与此同时，页面也会同时加载，也就是说他们会在同一时间内互不干扰的运作，这样就避免了阻塞

从上图可以看出，假设在Script标签中我们需要对一些DOM做操作的时候，有可能这个DOM还没加载出来，这个时候就会出错，所以async对第三方的脚本要更加友好一点，当然，为了处理这个问题，defer的出现就很有必要了。

2. defer
在页面加载的时候，碰到了defer，页面不会停止加载，与此同时，脚本会与它一同加载，但是不会执行，直到浏览器将html解析完后才会再去执行这个脚本，也就是说这个脚本的执行被推迟到了最后面，这样我们想去操作DOM也不会有什么问题了。

总结：
async更适合于脚本不依赖于DOM元素的环境下，相反，如果需要依赖脚本，defer相对来说更好一点。
所以一般情况下，defer要更稳定一点

标签：defer,DOM,标签,script,async,浅析,加载
来源： https://blog.csdn.net/qq_52340302/article/details/119280706

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。