perf(web): PluginGraphPage 替换持续 rAF 循环为按需重绘
移除持续 requestAnimationFrame 循环,改为数据变更 useEffect 触发 单次重绘 + ResizeObserver 监听容器变化,静态页面 CPU 占用大幅降低。
This commit is contained in:
@@ -376,15 +376,22 @@ export function PluginGraphPage() {
|
|||||||
}
|
}
|
||||||
}, [canvasSize, selectedCenter, hoverState, token]);
|
}, [canvasSize, selectedCenter, hoverState, token]);
|
||||||
|
|
||||||
// ── Animation loop ──
|
// ── On-demand redraw: data changes + resize ──
|
||||||
|
|
||||||
|
// 数据变更时触发单次重绘
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const animate = () => {
|
drawGraph();
|
||||||
|
}, [drawGraph]);
|
||||||
|
|
||||||
|
// 容器大小变化时触发重绘
|
||||||
|
useEffect(() => {
|
||||||
|
const container = containerRef.current;
|
||||||
|
if (!container) return;
|
||||||
|
const observer = new ResizeObserver(() => {
|
||||||
drawGraph();
|
drawGraph();
|
||||||
animFrameRef.current = requestAnimationFrame(animate);
|
});
|
||||||
};
|
observer.observe(container);
|
||||||
animFrameRef.current = requestAnimationFrame(animate);
|
return () => observer.disconnect();
|
||||||
return () => cancelAnimationFrame(animFrameRef.current);
|
|
||||||
}, [drawGraph]);
|
}, [drawGraph]);
|
||||||
|
|
||||||
// ── Mouse interaction handlers ──
|
// ── Mouse interaction handlers ──
|
||||||
|
|||||||
Reference in New Issue
Block a user