Chaoszhu'Blog

Appearance

script标签的defer与sync ​

作用： 异步加载js文件，不阻塞页面解析。(内联脚本无法异步加载)

了解 window.onload与DOMcontentLoaded的区别

defer与sync的区别 ​

defer ​

下载完毕等待文档解析完成后执行【在DOMContentLoaded事件前执行，有可能阻塞DOM渲染】 ​

注意：

1、如果有多个声明了defer的脚本，则会按顺序下载和执行

2、如果没有src属性则该属性无效

async ​

下载完毕立即执行【在window.onload事件前执行】 ​

注意：async下载js脚本不能保证执行顺序，因此js脚本之间不能有依赖关系。

可视化script标签 ​

image

使用场景 ​

如果脚本不依赖于其他脚本，则使用async

如果脚本依赖于其他脚本，则使用defer

应用场景 ​

淘宝首页用的都是async：https://www.taobao.com/

async在 window.onload事件前执行【此时DOM应该已经渲染完成，因此不阻塞DOM渲染】

image