阻塞渲染

原理

• CSS 不会阻塞 DOM 的解析
• CSS 会阻塞页面渲染
• js 会阻塞 DOM 解析
• 浏览器遇到 <script> 标签时，会触发页面渲染

defer和async

defer 和 async 之间的不同是他们开始执行脚本的时机的不同

defer 属性规定当页面已完成加载后，才会执行脚本。参考：菜鸟-defer

async 属性一旦脚本可用，则会异步执行。参考：菜鸟-async

以上两个图反应了defer和async的区别:async当中有一段阻止过解析

 

asnyc 在现代浏览器上支持性更好

defer 在老浏览器上兼容性更好

这两个属性当只有script标签放在头部时才有意义，script标签放在body下面时，这两个属性是没有意义的

最好的方式

最好的方式是用defer，因为不会打断页面解析过程