Benchmark: Can JavaScript benefit from the ECS pattern?

Can JavaScript benefit from the ECS pattern? (version: 0) Benchmark.js

JS arrays are weird and (probably?) not memory-contiguous, but just for kicks, let's see what difference there is (if any) between performing the same action on 1,000,000 objects in an object-oriented style (with the method attached to the object) vs an ECS-style (with the behavior separated from the raw data)

Comparing performance of: `OO-style vs ECS-style`

Created: 5 years ago by: Guest

Go to the latest result

Script Preparation code:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  tick() {
    this.x += 2;
    this.y += 2;
  }
}

var pointClasses = [];
var pointObjects = [];

for (let i = 0; i < 1000000; i++) {
  pointClasses.push(new Point(0, 0));
  pointObjects.push({ x: 0, y: 0 });
}

Tests:

OO-style
pointClasses.forEach((point) => { point.tick(); });
ECS-style
pointObjects.forEach((point) => { point.x += 2; point.y += 2; });

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 24 runs

ECS-style

138/s

OO-style

128/s

View exact numbers

✓ ECS-style: 138 ops/sec
• OO-style: 128 ops/sec

Mobile Results:

Chrome 9 runs

ECS-style

55/s

OO-style

55/s

View exact numbers

✓ ECS-style: 55 ops/sec
• OO-style: 55 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
OO-style
ECS-style

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Browser/OS: Chrome 146 on Linux

View result in a separate tab

ECS-style

89/s

OO-style

89/s

View exact numbers

Test name	Executions per second
✓ ECS-style	89 Ops/sec
OO-style	89 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**What is being tested?**

The benchmark compares two approaches to performing an action on 1,000,000 objects:

1. **Object-Oriented Style (OO-style)**: This approach uses classes and methods attached to objects. In this case, a `Point` class is defined with a constructor and a `tick()` method, and then instances of the class are created and used in an array.
2. **Entity-Component-System (ECS) Style**: This approach separates the data (entities) from the behavior (components). In this benchmark, two arrays are created: one for raw point data (`pointObjects`) and another for `Point` class instances (`pointClasses`). The ECS-style approach uses a method attached to an object in the same way as the OO-style approach.

**Options compared**

The two options being compared are:

1. **OO-style**: This approach is more traditional and is commonly used in JavaScript applications.
2. **ECS-style**: This approach is more modular and can be beneficial for complex systems with many objects and behaviors.

**Pros and Cons of each approach:**

* **OO-style**:
	+ Pros: Easy to understand, well-established pattern, and can lead to more organized code.
	+ Cons: Can be less efficient due to the overhead of class instances and method calls.
* **ECS-style**:
	+ Pros: Can be more efficient for large numbers of objects, as it separates data from behavior.
	+ Cons: Requires more setup and may lead to a steeper learning curve.

**Library and special JavaScript feature**

There is no library mentioned in the benchmark definition or test cases. However, the `Point` class uses a constructor function, which is a built-in JavaScript feature used for creating classes.

**Test user special JS feature**

There are no special JavaScript features used in this benchmark that would require specific knowledge or attention from test users.

**Other alternatives**

If you're interested in exploring other approaches to object-oriented programming or ECS-style systems in JavaScript, here are some alternatives:

* For a more lightweight ECS approach, you could consider using libraries like [Entity-Component-System](https://github.com/patriksarn/dotnet-ecs) or [ECS.js](https://ecstool.github.io/).
* If you prefer to stick with the OO-style approach, you could consider using other class-based design patterns, such as the Model-View-Controller (MVC) pattern.
* For a more functional programming-oriented approach, you could consider using libraries like [Ramda.js](https://ramdajs.com/) or [Lodash.js](https://lodash.com/).

Can JavaScript benefit from the ECS pattern? (version: 0) Benchmark.js

Comparing performance of: OO-style vs ECS-style

Created: 5 years ago by: Guest

Go to the latest result

OO-style

ECS-style

Historical Performance Data aggregated from 33 community runs

Desktop Results:

Chrome 24 runs

Mobile Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `OO-style vs ECS-style`