js中defer与async的差别

最新推荐文章于 2024-05-28 19:09:59 发布

hnzyycsdn

最新推荐文章于 2024-05-28 19:09:59 发布

阅读量210

点赞数

本文链接：https://blog.youkuaiyun.com/hnzyycsdn/article/details/102509373

版权

script标签用于加载脚本与执行脚本，在前端开发中可以说是很重要的。
但是若是直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载执行的过程中，会阻塞后续的DOM渲染。

解决出现在同一个文件中，可以在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。
所以script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。
但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。

下面简述一下这两者的区别：

defer：

script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；
如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；

总而言之，defer的作用就是让脚本在文档完全呈现出之后执行，延迟脚本总是按照他们的顺序执行，这种情况下一般把脚本放在页面最后，即<body>中。

async：

async的设置，会使得script脚本异步的加载并在允许的情况下执行
async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。、

总而言之，async 属性就是可以表示当前脚本不必等待其他脚本，不阻塞文档呈现。会在需要的时候加载，不按照页面顺序执行