Three.js中使用WebGLRenderer与CSS2DRenderer的性能影响及测算方法

• 基础开销逻辑：CSS2DRenderer本身不参与WebGL渲染管线，没有额外的draw call、显存占用，每帧核心逻辑只有两步：遍历所有CSS2DObject做3D到2D的屏幕坐标投影，给对应DOM元素设置transform属性更新位置。绝大多数业务场景下，只要CSS2DObject数量在50个以内，双渲染器并行的性能影响几乎感知不到。
• 高负载下的瓶颈：当CSS2DObject数量达到上百甚至上千量级时，开销会线性上涨，主要来自两部分：一是JS侧遍历对象、计算投影坐标的计算耗时；二是浏览器侧大量DOM同时更新位置触发的样式重算、合成层重绘开销——如果标签本身带复杂CSS效果（阴影、模糊滤镜、大圆角半透明），这部分开销会进一步升高。
• 容易忽略的隐性损耗：如果没给CSS2DRenderer的根容器设置pointer-events: none，会额外增加整层DOM的命中检测开销，还会拦截下层3D场景的鼠标交互；如果没给CSS2D元素加will-change: transform触发浏览器单独给元素开合成层，每次位置更新触发的重绘范围会扩大，更容易出现掉帧。
• 方案横向对比：标签量少的时候，CSS2DRenderer比“把HTML内容烤成WebGL纹理”“Canvas2D叠层重绘标签”的方案开销更低，不需要每帧更新纹理、重绘画布；但标签量超过200个时，它的性能表现会明显差于WebGL侧实例化渲染标签的方案。

测试前先控制变量：两组测试（仅WebGLRenderer、双渲染器并行）必须保持完全一致的3D场景复杂度——相同的模型、材质、光照、相机交互逻辑，唯一变量为是否启用CSS2DRenderer、是否挂载对应CSS2D元素，排除其他因素干扰结果。

1. 浏览器DevTools宏观性能测量 #

直接用Chrome自带的DevTools就能拿到核心指标，不需要额外工具：

• 打开Performance面板，开启4倍CPU降速模拟中低端设备性能，点击录制后，模拟用户日常操作（旋转、缩放、平移场景，触发标签显隐）30秒后停止录制。
• 对比两组测试的两个核心指标：平均FPS、帧率低于30fps的卡顿时长占比，每组测3次取平均值即可得到直观的性能差。
• 可以直接在主线程调用栈里定位CSS2DRenderer.render的执行耗时，如果单帧调用耗时超过2ms，说明CSS2D部分已经成为帧率瓶颈。
• 额外可以查看GPU内存折线、Layout/Paint阶段的耗时占比，定位显存、浏览器渲染管线的额外开销。

2. 代码级精准耗时统计 #

在渲染循环中插桩计时，可以精准拿到两个渲染器各自的单帧平均耗时，参考代码如下：

let webglAvgTime = 0
let css2dAvgTime = 0
const sampleFrameCount = 100 // 采样100帧取平均值，避免单帧波动
let currentFrame = 0

function renderLoop() {
  requestAnimationFrame(renderLoop)

  // 统计WebGLRenderer耗时
  const tStartWebgl = performance.now()
  webglRenderer.render(scene, camera)
  const tEndWebgl = performance.now()
  webglAvgTime += tEndWebgl - tStartWebgl

  // 单渲染器测试时注释以下整块代码，同时移除DOM中所有CSS2D元素
  const tStartCss2d = performance.now()
  css2dRenderer.render(css2dScene, camera)
  const tEndCss2d = performance.now()
  css2dAvgTime += tEndCss2d - tStartCss2d

  currentFrame++
  if (currentFrame === sampleFrameCount) {
    console.log(`WebGLRenderer单帧平均耗时: ${(webglAvgTime / sampleFrameCount).toFixed(2)}ms`)
    console.log(`CSS2DRenderer单帧平均耗时: ${(css2dAvgTime / sampleFrameCount).toFixed(2)}ms`)
    // 重置采样计数器
    webglAvgTime = 0
    css2dAvgTime = 0
    currentFrame = 0
  }
}
renderLoop()

注意：单渲染器场景测试时，不能只注释CSS2DRenderer的render调用，必须把所有CSS2DObject对应的DOM节点从页面中移除，否则DOM本身的渲染开销会被计入基础场景耗时，导致对比结果失真。

3. 真实场景补充验证 #

如果需要覆盖不同设备的真实用户表现，可以在业务代码中加入轻量的帧率统计逻辑，上报两组场景下的长任务占比（单帧执行超过50ms即为长任务）、交互响应延迟等指标，避免本地高性能开发机的测试结果和真实用户体验脱节。

内容的提问来源于stack exchange，提问作者ellis