小聊：Canvas 为啥卡？

说实话，我刚把一个 8000 节点的工业大屏跑起来帧数直接卡到 12 FPS，心里直喊“哎呀妈呀”。

先别慌，先打开 Chrome DevTools → Performance，录一段拖拽操作，kankan火焰图。

你会发现大块时间dou被 JS计算 吞掉了渲染本身倒是挺轻的。

所以我们得先把那堆 JS 效率给抠掉，再去撸 GPU 加速。

第一刀：只绘制可见区域

画布一千宽、两千高，但用户眼睛Nengkan到的只有几百像素。

把所有节点dou遍历一遍真的hen浪费。

用一个视口裁剪函数，把超出屏幕的直接丢掉：

function getVisible {
  const {x,y,w,h}=view;
  return nodes.filter;
}

这一步把渲染量削到原来不到 20%。

第二刀：离屏缓存 + drawImage

每个节点的样式基本固定——圆角矩形、颜色、图标、文字。

别每帧dou手动走路径，直接在离屏 Canvas 上预渲染成位图，然后 drawImage 撕过去。

function cacheNode{
  const off=document.createElement;
  off.width=node.w*devicePixelRatio;
  off.height=node.h*devicePixelRatio;
  const ctx=off.getContext;
  ctx.scale;
  // 绘制圆角矩形、填充颜色…
  return off;
}
function renderNode{
  if node._cache=cacheNode;
  ctx.drawImage;
}

GPU 那边直接抽纹理贴图，速度嗖嗖的。

第三刀：批量绘制同色节点

Ru果有一大堆“正常”状态dou是绿色的节点，就Ke以一次性 beginPath → rect → fill 把它们合并。

function batchFillByColor{
  const groups={};
  nodes.forEach.push;});
  for{
    ctx.fillStyle=color;
    ctx.beginPath;
    groups.forEach);
    ctx.fill;
  }
}

这样 fill 调用次数从几千降到十几次FPS 飙升。

进阶技巧：OffscreenCanvas + Web Worker

Ru果你的业务逻辑真的hen重，比如每帧要跑几万条连线计算，那主线程根本扛不住。

把渲染搬到 Worker 去，用 OffscreenCanvas.transferControlToOffscreen 把画布交给后台线程：

const off=canvas.transferControlToOffscreen;
const worker=new Worker;
worker.postMessage;

Worker 那边拿到 canvas 后照常绘制，主线程只负责 UI 响应。

A/B 测试：WebGL vs Canvas2D

Pixi.js 用 WebGL Neng冲到满帧，但调试成本高，而且在低端机上兼容性也不一定好。

If you just need a仪表盘或组态大屏，用纯 Canvas2D 加上上面的三刀Yi经够用了。

常见坑点 & 小插曲：为什么百度不收录？

我有一次写了篇技术博客，内容和这里差不多，却发现搜索结果根本找不到。朋友笑着说：“可Neng是百度不收录啊”。

其实原因hen简单：

页面缺少有效的 meta 描述和标题标签；

Sitemap 没提交或者 robots.txt 把重要路径拦住了；

PWA 或者 SPA 的路由全靠 JS 渲染，爬虫抓不到实际内容；

Crawl 延迟太久，被误判为低质量站点。

解决办法就是：

补全 `