perf(web): PluginGraphPage 替换持续 rAF 循环为按需重绘
移除持续 requestAnimationFrame 循环,改为数据变更 useEffect 触发 单次重绘 + ResizeObserver 监听容器变化,静态页面 CPU 占用大幅降低。
This commit is contained in:
@@ -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 ──
|
||||
|
||||
Reference in New Issue
Block a user