Skip to main content
Version: v8.x

性能技巧

¥Performance Tips

一般的​

¥General

  • 仅在需要时进行优化！PixiJS 可以立即处理大量内容

    ¥Only optimize when you need to! PixiJS can handle a fair amount of content off the bat

  • 请注意场景的复杂性。添加的对象越多，速度就越慢

    ¥Be mindful of the complexity of your scene. The more objects you add the slower things will end up

  • 顺序可以提供帮助，例如 sprite/graphic/sprite/graphic 比 sprite/sprite/graphic/graphic 慢

    ¥Order can help, for example sprite / graphic / sprite / graphic is slower than sprite / sprite / graphic / graphic

  • 一些较旧的移动设备运行速度稍慢。将选项 useContextAlpha: false 和 antialias: false 传递给渲染器或应用可以帮助提高性能

    ¥Some older mobile devices run things a little slower. Passing in the option useContextAlpha: false and antialias: false to the Renderer or Application can help with performance

  • 默认情况下禁用剔除，因为通常最好在应用级别执行此操作或将对象设置为 cullable = true。如果你受 GPU 限制，它将提高性能；如果你受 CPU 限制，则会降低性能

    ¥Culling is disabled by default as it's often better to do this at an application level or set objects to be cullable = true. If you are GPU-bound it will improve performance; if you are CPU-bound it will degrade performance

精灵​

¥Sprites

  • 尽可能使用 Spritesheets 来最小化总纹理

    ¥Use Spritesheets where possible to minimize total textures

  • 精灵可以使用最多 16 种不同的纹理进行批处理（取决于硬件）

    ¥Sprites can be batched with up to 16 different textures (dependent on hardware)

  • 这是渲染内容的最快方式

    ¥This is the fastest way to render content

  • 在较旧的设备上使用较小的低分辨率纹理

    ¥On older devices use smaller low resolution textures

  • 将扩展名 @0.5x.png 添加到缩小 50% 的 spritesheet 中，这样 PixiJS 就会自动在视觉上将它们加倍

    ¥Add the extention @0.5x.png to the 50% scale-down spritesheet so PixiJS will visually-double them automatically

  • 抽奖顺序很重要

    ¥Draw order can be important

图形​

¥Graphics

  • 图形对象在不经常修改时速度最快（不包括变换、alpha 或色调！）

    ¥Graphics objects are fastest when they are not modified constantly (not including the transform, alpha or tint!)

  • 图形对象在低于一定大小（100 点或更小）时进行批处理

    ¥Graphics objects are batched when under a certain size (100 points or smaller)

  • 小型图形对象与精灵（矩形、三角形）一样快

    ¥Small Graphics objects are as fast as Sprites (rectangles, triangles)

  • 使用数百个图形复杂对象可能会很慢，在这种情况下使用精灵（你可以创建纹理）

    ¥Using 100s of graphics complex objects can be slow, in this instance use sprites (you can create a texture)

质地​

¥Texture

  • 纹理由纹理垃圾收集器自动管理

    ¥Textures are automatically managed by a Texture Garbage Collector

  • 你也可以使用 texture.destroy() 自行管理它们

    ¥You can also manage them yourself by using texture.destroy()

  • 如果你计划一次摧毁多个，请在摧毁时添加随机延迟以消除冻结

    ¥If you plan to destroy more than one at once add a random delay to their destruction to remove freezing

  • 如果你打算自己删除大量纹理，请延迟纹理销毁

    ¥Delay texture destroy if you plan to delete a lot of textures yourself

文本​

¥Text

  • 避免在每一帧上更改它，因为这可能会很昂贵（每次绘制到画布然后上传到 GPU 时）

    ¥Avoid changing it on every frame as this can be expensive (each time it draws to a canvas and then uploads to GPU)

  • 位图文本为动态更改文本提供了更好的性能

    ¥Bitmap Text gives much better performance for dynamically changing text

  • 文本分辨率与渲染器分辨率相匹配，可以通过设置 resolution 属性自行降低分辨率，这样可以消耗更少的内存

    ¥Text resolution matches the renderer resolution, decrease resolution yourself by setting the resolution property, which can consume less memory

面具​

¥Masks

  • 如果使用太多口罩可能会很昂贵：例如，数百个面具确实会减慢速度

    ¥Masks can be expensive if too many are used: e.g., 100s of masks will really slow things down

  • 轴对齐的矩形蒙版是最快的（因为使用剪刀矩形）

    ¥Axis-aligned Rectangle masks are the fastest (as the use scissor rect)

  • 图形蒙版是第二快的（因为它们使用模板缓冲区）

    ¥Graphics masks are second fastest (as they use the stencil buffer)

  • 精灵蒙版是第三快的（它们使用过滤器）。它们真的很贵。不要在场景中使用太多！

    ¥Sprite masks are the third fastest (they uses filters). They are really expensive. Do not use too many in your scene!

过滤器​

¥Filters

  • 释放内存：container.filters = null

    ¥Release memory: container.filters = null

  • 如果你知道它们的大小：container.filterArea = new Rectangle(x,y,w,h)。这可以加快速度，因为这意味着不需要测量对象

    ¥If you know the size of them: container.filterArea = new Rectangle(x,y,w,h). This can speed things up as it means the object does not need to be measured

  • 过滤器很昂贵，使用太多会开始减慢速度！

    ¥Filters are expensive, using too many will start to slow things down!

BlendModes​

  • 不同的混合模式会导致批次中断（去优化）

    ¥Different blend modes will cause batches to break (de-optimize)

  • SceenSprite / NormalSprite / SceenSprite / NormalSprite 将是 4 个绘制调用

    ¥SceenSprite / NormalSprite / SceenSprite / NormalSprite would be 4 draw calls

  • SceenSprite / SceenSprite / NormalSprite / NormalSprite 将是 2 个绘制调用

    ¥SceenSprite / SceenSprite / NormalSprite / NormalSprite would be 2 draw calls

事件​

¥Events

  • 如果对象没有交互式子对象，则使用 interactiveChildren = false。然后事件系统将能够避免爬行对象

    ¥If an object has no interactive children use interactiveChildren = false. The event system will then be able to avoid crawling through the object

  • 如上所述设置 hitArea = new Rectangle(x,y,w,h) 应该会阻止事件系统爬行对象

    ¥Setting hitArea = new Rectangle(x,y,w,h) as above should stop the event system from crawling through the object