Benchmark: Can JavaScript benefit from the ECS pattern?

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

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: 4 years ago by: Guest

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

​x
 
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(); });
pointClasses.forEach((point) => {
point.tick();
});
ECS-style
pointObjects.forEach((point) => { point.x += 2; point.y += 2; });
pointObjects.forEach((point) => {
point.x += 2;
point.y += 2;
});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
OO-style
ECS-style

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 14 days ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 135 on Android

View result in a separate tab

Test name	Executions per second
OO-style	55.3 Ops/sec
ECS-style	55.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

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:

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.
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:

OO-style: This approach is more traditional and is commonly used in JavaScript applications.
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 or ECS.js.
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 or Lodash.js.

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/).

Related benchmarks: