Benchmark: big for loop vs multiple small for loops

HTML Preparation code:

<script type="module">
    import { World } from 'https://cdn.jsdelivr.net/npm/miniplex@2.0.0/+esm';
  	window.World = World;
</script>

Script Preparation code:

const world = new World();
window.world = world;

for (let i = 1, len = 14500; i <= len; i++) {
    const player = world.add({
      	screen: {
          isVisible: i & 1,
        },
        position: {
            x: i * 2,
            y: i * 4,
        },
        velocity: {
            x: i + 1,
            y: i + 2,
        },
        health: {
            current: i,
            max: i + 1,
        }
    });
}

for (let i = 1, len = 1500; i <= len; i++) {
    const player = world.add({
        position: {
            x: i * 2,
            y: i * 4,
        },
        velocity: {
            x: i + 1,
            y: i + 2,
        },
    });
}

Tests:

one big loop default
const entities = world.with("position", "screen"); for (const entity of entities) { const { position, screen } = entity; if (!screen.isVisible) { continue; } if (entity.velocity) { const { velocity } = entity; position.x += velocity.x position.y += velocity.y } if (entity.health) { const { health } = entity; if (health > 250) { position.x += 1; } } }
one big loop no consts
const entities = world.with("position", "screen"); for (const entity of entities) { if (!entity.screen.isVisible) { continue; } if (entity.position && entity.velocity) { entity.position.x += entity.velocity.x entity.position.y += entity.velocity.y } if (entity.position && entity.health) { if (entity.health > 250) { entity.position.x += 1; } } }
small loops
const velocityEntities = world.with("position", "screen", "velocity"); const healthEntities = world.with("position", "screen", "health"); for (const { position, screen, velocity } of velocityEntities) { if (!screen.isVisible) { continue; } position.x += velocity.x position.y += velocity.y } for (const { position, screen, health } of healthEntities) { if (!screen.isVisible) { continue; } if (health > 250) { position.x += 1; } }
small loops where
const velocityEntities = world.with("position", "screen", "velocity").where(({ screen }) => screen.isVisible); const healthEntities = world.with("position", "screen", "health").where(({ screen, health }) => screen.isVisible && health > 250); for (const { position, screen, velocity } of velocityEntities) { position.x += velocity.x position.y += velocity.y } for (const { position, screen, health } of healthEntities) { if (health > 250) { position.x += 1; } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one big loop default
one big loop no consts
small loops
small loops where

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
one big loop default	3171.1 Ops/sec
one big loop no consts	3126.6 Ops/sec
small loops	2406.7 Ops/sec
small loops where	414.5 Ops/sec

big for loop vs multiple small for loops (version: 0)

Comparing performance of: one big loop default vs one big loop no consts vs small loops vs small loops where

Created: 2 months ago by: Guest

Jump to the latest result

one big loop default

one big loop no consts

small loops

small loops where

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A