如何配置pixi.js仅在用户交互时更新帧以降低CPU/GPU占用

核心原因是PIXI.Application默认开启了持续运行的自动渲染循环，无论画面是否有更新都会每帧执行渲染，是导致你应用全程FPS居高、资源占用过高的直接原因。你需要关闭默认自动渲染逻辑，改为按需手动触发渲染。

1. 修改初始化配置，关闭自动渲染循环 #

调整你的PIXI初始化代码，关闭默认自动渲染能力：

this.ngZone.runOutsideAngular(() => {
  this.app = new PIXI.Application({
    backgroundColor: 0xefefef,
    autoDensity: true,
    // 新增配置关闭自动渲染循环
    autoStart: false, // 禁止启动默认的自动渲染任务
    sharedTicker: false // 不使用全局共享ticker，避免被其他逻辑意外唤醒
  });
  // 移除ticker默认绑定的render方法，彻底停止每帧自动渲染
  this.app.ticker.remove(this.app.render, this.app);
  this.SetCanvasSize();
});

2. 实现按需触发渲染逻辑 #

添加手动触发渲染的逻辑，仅在有交互或画面更新时执行渲染，同时加防抖避免短时间重复渲染：

// 渲染请求标记，避免同一帧内重复触发渲染
private isRenderPending = false;

// 手动触发画布渲染的公共方法
private triggerRender() {
  if (this.isRenderPending || !this.app) return;
  this.isRenderPending = true;
  requestAnimationFrame(() => {
    this.app.render();
    this.isRenderPending = false;
  });
}

绑定用户交互事件，用户操作时自动触发渲染：

this.ngZone.runOutsideAngular(() => {
  // 所有需要触发画布更新的交互事件
  const triggerEvents = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel', 'wheel', 'keydown', 'keyup'];
  triggerEvents.forEach(eventName => {
    this.app.view.addEventListener(eventName, () => this.triggerRender());
  });
});

后续如果你有主动修改画布内容的逻辑（比如修改精灵位置、更新文本、切换素材），修改完成后手动调用this.triggerRender()即可刷新画面。

3. 连续动画场景适配（可选） #

如果你的应用存在过渡动画、拖拽等需要连续多帧更新的场景，可以临时开启自动渲染，动画结束后再关闭：

// 示例：播放3秒过渡动画
private playAnimation() {
  // 动画开始时启动自动渲染
  this.app.ticker.add(this.app.render, this.app);
  this.app.ticker.start();

  // 动画结束回调（可替换为你的动画结束监听逻辑）
  setTimeout(() => {
    // 停止自动渲染
    this.app.ticker.remove(this.app.render, this.app);
    this.app.ticker.stop();
    // 最后渲染一帧收尾
    this.triggerRender();
  }, 3000);
}

注意事项 #

• 所有和PIXI相关的事件监听、渲染逻辑都需要放在ngZone.runOutsideAngular中执行，避免触发Angular不必要的变更检测，额外增加性能开销。
• 如果你的应用中有嵌入第三方PIXI插件，需要确认插件是否会主动唤醒ticker，如有需要可以针对性修改插件逻辑避免自动渲染被意外开启。

内容的提问来源于stack exchange，提问作者Doug