作用
(PS:文中的图是借鉴网络上的)
正常情况下,浏览器在加载指定脚本的时候,会暂停解析HTML源文件,然后去发送请求下载外部的script脚本,在下载完成并执行之后才会继续解析DOM。
那么通常情况下,为了解决加载脚本时阻塞页面渲染,导致出现空白页的现象,就用到了async/defer
。
async
表示异步,它会使浏览器异步下载脚本后立即同步执行,即:脚本下载是异步行为,并不影响DOM的加载,一旦下载完成暂停DOM的加载后执行脚本,再加载DOM
defer
与async也是异步下载,不同的是script脚本下载完成后并不立即执行,而是等DOM解析完成之后执行脚本,相比async
的粗暴,defer
明显更加实用。
使用场景
一般情况下,如果有多个脚本,需要优先加载的脚本可以加上async
,其他的则用defer
若无先后要求,更推荐用defer
<script src="https://www.google.com/recaptcha/api.js" async></script>
<script src="demo.js" defer></script>