Performance: [V8] Container.removeChildren performance issue

[XiBOR]

Current Behavior

When deleting a part of a container hierarchy, a recusive search of all elements of that hierarchy is performed, deleting them one after another. This causes a huge performance sag at that point (on the order of hundreds of milliseconds)
This worked much more efficiently in version 7.

Expected Behavior

I would like the deletion to happen within milliseconds like it did in the pixi 7.

Steps to Reproduce

Repeat example (with minor edits) on version 7, and get a response of 0 milliseconds

Environment

• pixi.js version: 8.0.4
• Browser & Version: Firefox 125.0b4 (64-bit), Chrome 123.0.6312.59
• OS & Version: macOS 14.4.1
• Running Example:

(async () =>
{
    // Create a new application
    const app = new PIXI.Application();

    // Initialize the application
    await app.init({ background: '#1099bb', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    // Create and add a container to the stage
    const container = new PIXI.Container();

    app.stage.addChild(container);

    // Load the bunny texture
    const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');

    // Create a 5x5 grid of bunnies in the container
    for (let i = 0; i < 25000; i++)
    {
        const bunny = new PIXI.Sprite(texture);

        bunny.x = (i % 5) * 40;
        bunny.y = Math.floor(i / 5) * 40;
        container.addChild(bunny);
    }

    // Move the container to the center
    container.x = app.screen.width / 2;
    container.y = app.screen.height / 2;

    // Center the bunny sprites in local container coordinates
    container.pivot.x = container.width / 2;
    container.pivot.y = container.height / 2;

    // Listen for animate update
    app.ticker.add((time) =>
    {
        // Continuously rotate the container!
        // * use delta to create frame-independent transform *
        container.rotation -= 0.01 * time.deltaTime;
    });
  
    const start = performance.now()
    app.stage.removeChildren()
    const time = performance.now() - start
    console.log(time)
})();

Possible Solution

If I found correctly, at the point of removal you can see how the approach has changed from removing one pack to removing one after another (with the whole tail shifting)

Current recursive removing:

pixijs/src/scene/container/RenderGroup.ts

Line 178 in d4cb3d1

this._children.splice(index, 1);

Previous version: https://github.com/pixijs/pixijs/blob/v7.x/packages/display/src/Container.ts#L318

Additional Information

No response

[joergplewe]

is this comparable to #10345 ?

[GoodBoyDigital]

oh yes, this may well be!

[GoodBoyDigital]

better late than never :D #10505