跳到主要内容

浏览器渲染流程

从字节到页面的大致过程​

  1. 解析 HTML，生成 DOM
  2. 解析 CSS，生成 CSSOM
  3. 合并生成 Render Tree
  4. Layout：计算元素尺寸和位置
  5. Paint：把像素绘制到不同图层
  6. Composite：合成图层并显示到屏幕

为什么回流比重绘贵​

  • Reflow / Layout 需要重新计算元素的几何信息
  • Repaint 只是在不改变布局的前提下重新绘制像素
  • 回流通常会连带触发重绘，所以代价更大

前端常见触发点​

  • 修改元素尺寸、位置、字体大小
  • 频繁读取布局信息，例如 offsetWidth、getBoundingClientRect()
  • 在循环里交替读写 DOM

实用优化思路​

  • 批量更新 DOM，减少反复读写
  • 动画优先使用 transform 和 opacity
  • 对大块异步内容做懒加载和分片渲染
  • 用 requestAnimationFrame 组织视觉更新
  • 对超大列表使用虚拟列表

现代性能指标​

  • FCP：首次内容绘制
  • LCP：最大内容绘制
  • CLS：累计布局偏移
  • INP：交互响应延迟

做页面性能优化时，建议从这些指标往回定位，而不是只盯着“包体积大小”。