标签归档:Web 性能优化

JS CSS 是如何阻塞页面渲染的

TLDR,CSS 和 JS 都会阻塞页面的 关键渲染路径 ,不同情况下阻塞效果不同:

  • 内联 JS 的执行会阻塞 DOM 构建(Layout)
  • 外部 JS 的加载执行都会阻塞 DOM 构建
  • 内联 CSS 的 CSSOM 构建会阻塞渲染树的构建,从而阻塞布局(Layout)
  • 外部 CSS 的加载 CSSOM 构建都会阻塞渲染树的构建,从而阻塞布局
  • 在页面存在 CSS 和 JS 的情况下,CSSOM 的构建会阻塞他后面 JS 的执行
  • script 标签的 async 和 derfer 属性能使 JS 的加载不阻塞 DOM 构建
查看全文