pixi-performance

Profile before optimizing. PixiJS handles a lot of content well out of the box; browser DevTools Performance + GPU profiling should be your first move. Once you've found the bottleneck, apply the targeted pattern below (destroy, pool, batch, cache, or cull).

Quick Start

container.cacheAsTexture(true);
container.updateCacheTexture();
container.cacheAsTexture(false);
container.destroy({ children: true });

import { CullerPlugin, extensions } from "pixi.js";
extensions.add(CullerPlugin);

offscreenContainer.cullable = true;
offscreenContainer.cullArea = new Rectangle(0, 0, 256, 256);

// Tune GC via init options (ms). The `textureGC.*` properties are
// deprecated since 8.15.0 — use these on the Application init instead.
await app.init({ gcMaxUnusedTime: 60_000, gcFrequency: 30_000 });

Related skills: pixijs-scene-container (destroy options), pixijs-scene-core-concepts (render groups, layers, culling), pixijs-scene-text (BitmapText for dynamic content), pixijs-assets (atlasing), pixijs-custom-rendering (custom batchers).

Core Patterns

Proper destroy with cleanup

import { Sprite, Assets } from "pixi.js";

const texture = await Assets.load("character.png");
const sprite = new Sprite(texture);

// Destroy sprite only (preserve texture for reuse)
sprite.destroy();

// Destroy sprite AND its texture
sprite.destroy({ children: true, texture: true, textureSource: true });

When done with a loaded asset entirely:

Assets.unload("character.png");

This removes it from the cache and unloads the GPU resource.

Application destroy/recreate cycle

import { Application } from "pixi.js";

// Correct destroy that cleans global pools
app.destroy({ releaseGlobalResources: true });

const newApp = new Application();
await newApp.init({ width: 800, height: 600 });

Without releaseGlobalResources: true, pooled objects (batches, textures) from the old app leak into the new one, causing flickering and corruption.

Texture garbage collection