Canvas 优化pixi栅格视口

我正在使用pixi.js创建一个交互式网格。该网格由PIXI图形矩形组成。我现在正在创建一个25000个矩形的布局，浏览器很难处理它（下面的代码沙盒）

这是我的设置：

setup() {
                // making a 30 x 13 grid of tiles
                for (let i = 0; i < 25000; i++) {
                    let square = new PIXI.Graphics();
                    square.beginFill(0xF2F2F2);
                    square.drawRect(0, 0, 25, 25);
                    square.endFill();
                    // Opt-in to interactivity
                    square.interactive = true;
                    square.buttonMode = true;

                    square.on('pointerdown', this.onButtonDown);
                    // square.on('pointerover', this.onButtonOver);
                    // square.on('mouseout', this.onButtonOut);

                    square.x = (i % 30) * 32;
                    square.y = Math.floor(i / 30) * 32;
                    // add squares to stage
                    this.viewport.addChild(square);
                }
            }

setup（）{
//制作30 x 13的瓷砖网格
for（设i=0；i<25000；i++）{
设square=new PIXI.Graphics（）；
方形填充物（0xF2F2）；
正方形.drawRect（0,0,25,25）；
正方形。endFill（）；
//选择参与互动
square.interactive=true；
square.buttonMode=true；
方.on（'pointerdown'，this.onButtonDown）；
//正方形.on（'pointerover'，this.onButtonOver）；
//方.on（'mouseout'，this.onButtonOut）；
平方x=（i%30）*32；
平方y=数学楼层（i/30）*32；
//将方块添加到舞台
this.viewport.addChild（正方形）；
}
}

是否有办法对此进行优化，或者我是否已将画布容量最大化

---

在您提供的codesandbox中，我注意到影响性能的两个因素：

Vue—将PIXI和stage（使用所有数千个矩形）作为Vue数据可能会导致Vue分析每个帧上的所有对象

每个矩形的交互性：

^如果你把这个注释掉，你会注意到所有的工作都会更顺畅。这会影响性能，因为插件可能正在为每个矩形创建一些事件监听器或其他东西，所以当它有25k个事件监听器时，它是可以注意到的

注意：若要查看差异，您需要将文件保存在沙盒中并重新加载页面-仅重新加载那里的预览似乎不会破坏以前的预览（因此您仍然会看到缓慢）

无论如何，这是您的代码，但是没有Vue，并且具有注释掉的交互性：-但是有25000个矩形，而不是1000个：）

关于交互性：我认为你应该尝试用不同的方式来做：点击时，你应该取点击的x和y，然后计算出哪个矩形在那个位置。我的意思是：

---

对于进一步可能的优化，请尝试阅读“批渲染”（例如：）

使用世界坐标计算x，y是一个好主意！效果很好

      // Opt-in to interactivity
      square.interactive = true;
      square.buttonMode = true;