Benchmark: Testing JS Performance of deleting a large map.

Testing JS Performance of deleting a large map. (version: 15)

In FF if the object being iterated over is large enough it will trigger an expensive cycle collection with Test #1. Test #2 runs approximately 100 times faster on FF. The difference is marginal in Chrome. To see the difference in timing, I recommend loading up the debugger console to see exactly how many ms each run takes.

Comparing performance of: The slow version vs Faster version using Object.keys().

Created: 9 years ago by: Registered User

Jump to the latest result

Script Preparation code:

var map = {};

function generateSequence(prefix, numItems) { 
  var buffer = [];
  var prefixInstance = prefix || "";
  for (var i = 0; i < numItems; i++) {
    buffer.push(prefix + i);
  }
  return buffer;
}

var startTime;
function startTimer() {
  startTime = new Date().getTime()
}
function stopTimer() {
  var endTime = new Date().getTime();
  console.log("Took " + (endTime - startTime) +  " ms");
}

function generateMap() {
  console.log("Generating");
  for (var i = 0; i < 50000; i++) {
	map["a-" + i] = { 
      a: generateSequence("aaaaaaaaa", 10)
    }
  }

}

Tests:

The slow version
generateMap(); console.log("Test #1"); startTimer(); for (key in map) { if (map.hasOwnProperty(key)) { delete map[key]; } } stopTimer();
Faster version using Object.keys().
generateMap(); console.log("Test #2"); startTimer(); var keys = Object.keys(map); for (var i = 0, ii = keys.length; i < ii; i++) { delete map[keys[i]]; } stopTimer();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
The slow version
Faster version using Object.keys().

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
The slow version	52.4 Ops/sec
Faster version using Object.keys().	113.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to test the performance of deleting a large map in JavaScript, specifically between two approaches: using the `for...in` loop with `hasOwnProperty()` (Test #1) and using `Object.keys()` (Test #2).

**Options Compared**

The two options being compared are:

1. **Test #1**: Using the `for...in` loop with `hasOwnProperty()` to iterate over the map's keys and delete each key-value pair.
```javascript
for (var i = 0; i < numItems; i++) {
  buffer.push(prefix + i);
}
```
2. **Test #2**: Using `Object.keys()` to get an array of the map's keys, then iterating over that array using a traditional `for` loop to delete each key-value pair.
```javascript
var keys = Object.keys(map);
for (var i = 0, ii = keys.length; i < ii; i++) {
  delete map[keys[i]];
}
```
**Pros and Cons of Each Approach**

1. **Test #1**: Using the `for...in` loop with `hasOwnProperty()` has a few advantages:
	* It's more concise and easier to read.
	* It allows for early exit if the map is empty, which can improve performance in some cases.
However, it also has some drawbacks:
	* The `hasOwnProperty()` check adds extra overhead, especially when the map is large.
	* This approach requires manual management of the iterator, which can lead to errors.
2. **Test #2**: Using `Object.keys()` provides a more modern and expressive way to iterate over the map's keys:
	* It's faster and more efficient than using the `for...in` loop with `hasOwnProperty()`.
	* It's more concise and easier to read, especially for developers familiar with modern JavaScript features.
However, it also has some drawbacks:
	* The `Object.keys()` method may not be supported in older browsers or environments.
	* This approach assumes that the map is an object with enumerable properties, which may not always be the case.

**Library Usage**

The benchmark uses the `generateSequence` function to generate a large sequence of strings, but it does not use any external libraries. However, it does rely on the built-in `Date` object and the `console.log()` function for logging purposes.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark, aside from the modern usage of `Object.keys()` which is a relatively recent addition to the language.

**Alternative Approaches**

Other approaches to deleting a large map could include:

* Using `forEach()` with a callback function
* Using a library like Lodash's `pick()` or `omit()`
* Using a specialized data structure like a trie or an interval tree

These alternatives may offer different trade-offs in terms of performance, readability, and maintainability, depending on the specific use case and requirements.

Related benchmarks: