直接渲染万级图表节点会卡死浏览器主线程，因其非为高密度SVG或Canvas渲染设计：5000个circle或万次fillRect触发大量Layout/Paint/Composite，首帧超800ms、滚动掉帧、白屏、内存飙升崩溃；DOM越多样式计算呈非线性增长，g嵌套过深加剧问题；Canvas未做dirty region划分、未节流重绘、未复用ImageData同样卡顿；WebGL对简单图表属过度设计且兼容差；有效分层需按更新频率+渲染职责+数据粒度切分为DOM+Canvas+Worker三段式：Canvas画静态底图，DOM承载高频交互元素，Worker处理聚合计算；Canvas层须避免全屏clearRect、循环设样式、未适配devicePixelRatio；DOM交互需节流事件、复用DOM片段、will-change优化、批量更新并校准坐标系。
为什么直接渲染万级图表节点会卡死
浏览器主线程不是为高密度 SVG 或 Canvas 渲染设计的。一个含 5000 个 <circle> 的 <svg>，或用 ctx.fillRect() 循环画 1 万次，会触发大量 Layout + Paint + Composite，尤其在低端设备上，首帧渲染可能超 800ms，滚动时掉帧严重。
常见错误现象包括：图表区域白屏数秒、缩放/拖拽卡顿、DevTools Performance 面板显示大量 Layout 和 Update Layer Tree 事件、内存占用持续攀升后崩溃。
- DOM 元素越多，样式计算与布局开销呈非线性增长，
<g>嵌套过深（>6 层）会放大这一问题 - Canvas 绘制不等于“性能好”——未做 dirty region 划分、未节流重绘、未复用
ImageData，一样卡 - WebGL 虽快，但对简单柱状图/折线图属于过度设计，且调试成本高、兼容性差（如旧版 Safari）
分层渲染结构怎么搭：DOM + Canvas + Worker 三段式
真正有效的分层不是按“视觉分区”，而是按“更新频率 + 渲染职责 + 数据粒度”切分。核心原则是：静态底图走 Canvas，动态标注走 DOM，聚合计算扔给 Worker。
-
<canvas>层：只画坐标轴、网格线、聚合后的图形基元（如每 100 点合并为 1 条折线段），固定尺寸，不响应交互 -
<div>层（绝对定位覆盖在 canvas 上）：只放 tooltip、选中高亮框、实时拖拽锚点等高频更新元素，用transform: translate()移动，避免 layout - Worker 层：接收原始数据流，做采样（downsample）、聚类（cluster）、极值计算（min/max/avg），输出精简后的渲染指令数组，不操作 DOM
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="chart-container">
<canvas id="base-canvas" width="800" height="400"></canvas>
<div class="overlay-layer">
<div class="tooltip" style="transform: translate(120px, 80px)">...</div>
</div>
</div>
Canvas 层必须规避的三个坑
Canvas 性能陷阱往往藏在细节里，不是“用了就快”，而是“用对才快”。
- 别在每次
requestAnimationFrame里调ctx.clearRect(0,0,w,h)——全屏擦除代价高；改用ctx.save() / ctx.restore()+ 局部重绘区域标记 - 避免在循环里反复设置
ctx.fillStyle、ctx.lineWidth；提前批量分组，用Path2D构建复合路径再统一stroke() - 像素比（devicePixelRatio）没适配：
canvas.width和canvas.style.width必须分开设，否则高清屏下模糊或缩放失真
DOM 层交互如何不拖慢主线程
tooltip、高亮、拖拽这些看似“轻量”的交互，一旦绑定不当，就会让整个图表失去响应。
- 鼠标移动事件必须节流：
addEventListener('mousemove', throttle(handleMove, 16))，而非直接监听 - tooltip 内容不要用
innerHTML = data拼接——XSS 风险 + 创建新节点开销大；预建 DOM 片段池，只更新textContent和style.transform - 高亮矩形用
<div class="highlight-rect">，CSS 设will-change: transform，触发合成层，避免重排 - 所有 DOM 更新集中在单次
requestAnimationFrame中批量执行，禁止在滚动/缩放中同步修改多个元素 style
最易被忽略的是：Canvas 与 DOM 层坐标系未对齐——比如 canvas 用逻辑像素 800×400，但容器 div 有 padding 或 border，导致 tooltip 偏移。务必用 getBoundingClientRect() 实时算偏移，别硬编码。
