perf(web): PluginGraphPage 替换持续 rAF 循环为按需重绘

移除持续 requestAnimationFrame 循环,改为数据变更 useEffect 触发
单次重绘 + ResizeObserver 监听容器变化,静态页面 CPU 占用大幅降低。
This commit is contained in:
iven
2026-04-27 09:58:51 +08:00
parent 1c7184b6bc
commit af44476c0f

View File

@@ -376,15 +376,22 @@ export function PluginGraphPage() {
}
}, [canvasSize, selectedCenter, hoverState, token]);
// ── Animation loop ──
// ── On-demand redraw: data changes + resize ──
// 数据变更时触发单次重绘
useEffect(() => {
const animate = () => {
drawGraph();
}, [drawGraph]);
// 容器大小变化时触发重绘
useEffect(() => {
const container = containerRef.current;
if (!container) return;
const observer = new ResizeObserver(() => {
drawGraph();
animFrameRef.current = requestAnimationFrame(animate);
};
animFrameRef.current = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animFrameRef.current);
});
observer.observe(container);
return () => observer.disconnect();
}, [drawGraph]);
// ── Mouse interaction handlers ──