This page collects practical advice for improving frame rate and reducing memory usage in PixiJS applications. Start with the General section; the rest are organized by feature area. Profile before optimizing; PixiJS handles a lot of content well out of the box.
General
Profile first! PixiJS can handle a large amount of content without optimization
Be mindful of the complexity of your scene. The more objects you add the slower things will end up
Group similar object types together in the scene graph. sprite / sprite / graphic / graphic produces 2 draw calls, while sprite / graphic / sprite / graphic produces 4, because each type change breaks the batch
Some older mobile devices run things a little slower. Passing in the option backgroundAlpha: 1 and antialias: false to the Renderer or Application can help with performance
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
Use Spritesheets where possible to minimize total textures
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
Add the extension @0.5x.png to the 50% scale-down spritesheet so PixiJS will visually-double them automatically
Draw order can be important
Graphics
Graphics objects are fastest when they are not modified constantly (not including the transform, alpha or tint!)
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
You can also manage them yourself by using texture.source.unload() or Assets.unload()
When destroying many textures at once, stagger the calls across multiple frames (e.g., destroy 5 per frame) to avoid a single-frame freeze
Text
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
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 they use scissor rect)
Graphics masks are second fastest (as they use the stencil buffer)
Sprite masks are the third fastest (they use filters). They are really expensive. Do not use too many in your scene!
Filters
Release memory: container.filters = null
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 break batches, just like mixing object types (see General section above). Group objects with the same blend mode together:
Screen / Normal / Screen / Normal = 4 draw calls
Screen / Screen / Normal / Normal = 2 draw calls
Events
If an object has no interactive children use interactiveChildren = false. The event system will then be able to avoid crawling through the object
Setting hitArea = new Rectangle(x, y, w, h) on a container tells the event system to use that rectangle for hit testing instead of recursively checking all children