Benchmark: Copy ArrayBuffer: DataView vs per bytes

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var size = 0xFFFF;

var source = new Uint8Array(size);
var target = new Uint8Array(size);

for (let i = 0; i < size; i++) {
	source[i] = 100*Math.random();
}

Tests:

per bytes
for (let i; i < size; i++) { target[i] = source[i]; }
DataView
var cloned = new ArrayBuffer(source.byteLength); var view = new DataView(cloned); for (var byteIndex = 0; byteIndex < source.byteLength; byteIndex++) { view.setInt8(byteIndex, source[byteIndex]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
per bytes
DataView

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
per bytes	67164104.0 Ops/sec
DataView	1388.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark conducted at MeasureThat.net focuses on comparing two methods for copying data from one `ArrayBuffer` to another in JavaScript. The two methods being compared are:

1. **Per Bytes Copying:**
   ```javascript
   for (let i = 0; i < size; i++) {
       target[i] = source[i];
   }
   ```
   - **Description:** This approach copies each individual byte from the `source` array to the `target` array using a loop. It iterates through every index of the `Uint8Array` (which is a view of the underlying `ArrayBuffer`) and assigns the value directly from `source` to `target`.
   - **Pros:** 
     - Simplicity: This method is straightforward and easy to understand.
     - Fine control: Programmers have direct control over each byte, which allows for potential customizations if needed.
   - **Cons:**
     - Performance: In general, this method is likely to be slower due to the overhead of the loop operation for each byte, especially for large arrays.
     - Non optimal hardware utilization: This copying strategy might not leverage specific optimizations available in modern JavaScript engines.

2. **Using DataView:**
   ```javascript
   var cloned = new ArrayBuffer(source.byteLength);
   var view = new DataView(cloned);
   for (var byteIndex = 0; byteIndex < source.byteLength; byteIndex++) {
       view.setInt8(byteIndex, source[byteIndex]);
   }
   ```
   - **Description:** Here, a new `ArrayBuffer` is created that is the same size as the `source`, and a `DataView` is used to manipulate the bytes. `DataView` provides a view of the buffer, allowing for fine-tuned read/write access to individual bytes or larger types if desired (`Int16`, `Int32`, etc.).
   - **Pros:** 
     - Structuring: `DataView` allows working with different types of data (not just bytes) and can interact with the underlying buffer in a more complex manner if needed.
     - Flexibility: This can be advantageous when handling data formats or binary protocols.
   - **Cons:**
     - Complexity: It adds a layer of complexity with the `DataView` functionality, which may not be necessary for simple byte-copying tasks.
     - Performance: In this benchmark, this method performed significantly worse than the `per bytes` method, indicating higher overhead due to the use of `DataView`.

### Benchmark Results:
The results show a stark contrast in performance between the two approaches:
- **Per Bytes:** Obtained an impressive execution rate of approximately **67,164,104 executions per second**.
- **DataView:** Achieved only **1,387.99 executions per second**, highlighting a dramatic performance hit.

### Additional Considerations:
- **Use Cases:** While both methods can be used to copy data, in performance-critical applications (like the copying of large data buffers frequently), it's preferable to use the simpler method (per bytes) due to its better performance.
- **Alternative Approaches:** Other alternatives for copying data between buffers include:
  - **TypedArray.set() Method:** Using `target.set(source)` allows copying the entire array in one call, which is typically optimized in JavaScript engines for performance compared to manual iteration.
  - **Direct Buffer Allocation and Memory Managing Techniques:** Using WebAssembly for higher performance scenarios where large amounts of data need to be efficiently managed can offer advantages over pure JavaScript solutions.

This benchmark effectively illustrates the performance trade-offs among different approaches to buffer manipulation, emphasizing the importance of choosing the right technique for specific tasks in JavaScript.

Related benchmarks:

Copy ArrayBuffer: DataView vs per bytes (version: 1)

Comparing performance of: per bytes vs DataView

Created: one year ago by: Registered User

Jump to the latest result

per bytes

DataView

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):