Run results for: SoA vs AoS vs Packed Typed Array

Run details:

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

Browser: Chrome 145

Operating system: Windows

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
SoA	9048303.0 Ops/sec
AoS	9159892.0 Ops/sec
Packed Typed Array	8949972.0 Ops/sec

Script Preparation code:

'use strict';
window.N = Math.pow(10, 9);

class Packed256 {
 	constructor(length) {
     	this.store = new Float64Array(length << 2);
    }
  
  	getPX(index) { return this.store[(index << 2) + 0]; }
  	getPY(index) { return this.store[(index << 2) + 1]; }
  	getVX(index) { return this.store[(index << 2) + 2]; }
  	getVY(index) { return this.store[(index << 2) + 3]; }
  
  	setPX(index, val) { this.store[(index << 2) + 0] = val; }
  	setPY(index, val) { this.store[(index << 2) + 1] = val; }
  	setVX(index, val) { this.store[(index << 2) + 2] = val; }
  	setVY(index, val) { this.store[(index << 2) + 3] = val; }
}

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));

packed = new Packed256(N);
for (let i = 0; i < N; i++) {
 	packed.setPX(i, Math.random() * 100);
 	packed.setPY(i, Math.random() * 100);
 	packed.setVX(i, Math.random() * 100);
 	packed.setVY(i, 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; }
Packed Typed Array
var N = window.N; for (var i = 0; i < N; i++) { packed.setPX(i, packed.getPX(i) + packed.getVX(i)); packed.setPY(i, packed.getPY(i) + packed.getVY(i)); }