Run results for: big for loop vs multiple small for loops

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser: Chrome 121

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
one big loop default	2469.6 Ops/sec
one big loop no consts	2465.5 Ops/sec
small loops	1942.7 Ops/sec
small loops where	223.3 Ops/sec

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; } }

Run results for: big for loop vs multiple small for loops

one big loop default

one big loop no consts

small loops

small loops where