性能技巧

一般的

• 仅在需要时进行优化！ PixiJS 可以立即处理大量内容
• 请注意场景的复杂性。 添加的对象越多，速度就越慢
• 顺序可以提供帮助，例如 sprite/graphic/sprite/graphic 比 sprite/sprite/graphic/graphic 慢
• 一些较旧的移动设备运行速度稍慢。 将选项 useContextAlpha: false 和 antialias: false 传递给渲染器或应用可以帮助提高性能
• 默认情况下禁用剔除，因为通常最好在应用级别执行此操作或将对象设置为 cullable = true。 如果你受 GPU 限制，它将提高性能； 如果你受 CPU 限制，则会降低性能

精灵

• 尽可能使用 Spritesheets 来最小化总纹理
• 精灵可以使用最多 16 种不同的纹理进行批处理（取决于硬件）
• 这是渲染内容的最快方式
• 在较旧的设备上使用较小的低分辨率纹理
• 将扩展名 @0.5x.png 添加到缩小 50% 的 spritesheet 中，这样 PixiJS 就会自动在视觉上将它们加倍
• 抽奖顺序很重要

图形

• 图形对象在不经常修改时速度最快（不包括变换、alpha 或色调！）
• 图形对象在低于一定大小（100 点或更小）时进行批处理
• 小型图形对象与精灵（矩形、三角形）一样快
• 使用数百个图形复杂对象可能会很慢，在这种情况下使用精灵（你可以创建纹理）

质地

• 纹理由纹理垃圾收集器自动管理
• 你也可以使用 texture.destroy() 自行管理它们
• 如果你计划一次摧毁多个，请在摧毁时添加随机延迟以消除冻结
• 如果你打算自己删除大量纹理，请延迟纹理销毁

文本

• 避免在每一帧上更改它，因为这可能会很昂贵（每次绘制到画布然后上传到 GPU 时）
• 位图文本为动态更改文本提供了更好的性能
• 文本分辨率与渲染器分辨率相匹配，可以通过设置 resolution 属性自行降低分辨率，这样可以消耗更少的内存

面具

• 如果使用太多口罩可能会很昂贵： 例如，数百个面具确实会减慢速度
• 轴对齐的矩形蒙版是最快的（因为使用剪刀矩形）
• 图形蒙版是第二快的（因为它们使用模板缓冲区）
• 精灵蒙版是第三快的（它们使用过滤器）。 它们真的很贵。 不要在场景中使用太多！

过滤器

• 释放内存： displayObject.filters = null
• 如果你知道它们的大小： displayObject.filterArea = new PIXI.Rectangle(x,y,w,h)。 这可以加快速度，因为这意味着不需要测量对象
• 过滤器很昂贵，使用太多会开始减慢速度！

BlendModes

• 不同的混合模式会导致批次中断（去优化）
• SceenSprite / NormalSprite / SceenSprite / NormalSprite 将是 4 个绘制调用
• SceenSprite / SceenSprite / NormalSprite / NormalSprite 将是 2 个绘制调用

CacheAsBitmap

• 设置为 true 通过将对象缓存为纹理将其转换为精灵
• 当它被激活时，它将对象绘制到纹理上，它会产生一次性成本
• 避免频繁更改元素上的此项
• 如果你有一个复杂的项目，其中有很多精灵/滤镜并且不移动，那么这将加快渲染速度！
• 不需要应用于精灵，因为它们已经是纹理
• 如果子对象不断变化，请勿使用，因为这会减慢速度

事件

• 如果对象没有交互式子对象，则使用 interactiveChildren = false。 然后事件系统将能够避免爬行对象
• 如上所述设置 hitArea = new PIXI.Rectangle(x,y,w,h) 应该会阻止事件系统爬行对象