defer和async的区别
共同点:都是异步,不会阻止dom的渲染
不同点:
- 执行顺序:多个带
async的标签,不能保证加载的顺序,多个带defer属性的标签,按照加载顺序执行 - 脚本是否并行执行:
async属性,后续文档的加载和js脚本的加载是异步,执行不是,还是会打断页面解析;defer属性,加载后续文档的过程和js脚本的加载(此时只加载不执行)是异步的,js脚本需要等到文档所有的元素解析完成之后执行,DoMcontentLoad事件触发之前执行,总而言之,async的加载不打断页面解析,执行会打断页面解析,defer加载和执行都不会打断页面解析 - 正常情况,加载js,DOM停止渲染,js加载并且执行完毕,继续渲染DOM
总结,在尽可能的情况下,我们要将scrip标签放到文档最后