Run results for: Classes SoA vs AoS

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser: Firefox 139

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

SoA

5.6M/s

AoS

5.6M/s

View exact numbers

Test name	Executions per second
✓ SoA	5,626,933 Ops/sec
AoS	5,596,214 Ops/sec

Script Preparation code:

'use strict';
window.N = Math.pow(10, 9);

class PointAndVelocity {
    constructor(x, y, vx, vy) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
    }
}

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

class Velocity {
    constructor(vx, vy) {
        this.vx = vx;
        this.vy = vy;
    }
}

aos = Array(N).fill(new PointAndVelocity(0, 0, 0, 0))
    .map(() => new PointAndVelocity(Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100));

// SoA, we try to duplicate the data so numeric differences are out of the question.
points = Array(N).fill(new Point(0, 0)).
    .map((_, i) => new Point(aos[i].x, aos[i].y));
velocities = Array(N).fill(new Velocity(0, 0)).
    .map((_, i) => new Velocity(aos[i].vx, aos[i].vy));

Tests:

SoA
var N = window.N; for (var i = 0; i < N; ++i) { var point = points[i]; var velocity = velocities[i]; point.x += velocity.vx; point.y += velocity.vy; }
AoS
var N = window.N; for (var i = 0; i < N; ++i) { var pav = aos[i] pav.x += pav.vx; pav.y += pav.vy; }

Run results for: Classes SoA vs AoS

Same as usual Float Array base SoA vs AoS but with classes and objects instead of raw number. I was cursious if the benefit of SoA still holds true even with classes.

SoA

AoS