跳到主要内容

渲染阻塞与优化

渲染阻塞由哪些原因引起？​

  • 网络: 请求过多或网络延迟大, 外部文件加载缓慢;
  • CSS 与 JS 解析: 遇到 link/style/script 时引入外部文件; JS 阻塞 HTML 解析, CSS 阻塞渲染树生成; 二者执行时间过长都会阻塞渲染;
  • JS 长时间任务: 阻塞主线程事件循环;
  • 垃圾回收: 同样阻塞主线程事件循环;
  • GPU: 某帧渲染操作过多, 无法在 16ms 内完成;

如何减少 JS 与 CSS 造成的阻塞？​

  • JS:
    • 避免耗时操作, 用 Web Worker 或分片执行 (setTimeout / requestAnimationFrame);
    • 把 script 标签放到 body 底部;
    • 用 defer/async 延迟或异步加载;
  • CSS:
    • 关键 CSS 内联进 HTML;
    • 大体积 CSS 放到 body 底部;
    • 用 JS 动态加载;
  • GPU: 分片渲染;

如何监控帧率？​

  • 开发环境: 开发者工具 → more tools → rendering → frame rendering stats;
  • 生产环境: 用 requestAnimationFrame 统计帧间隔;