Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
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):
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:
Dataview vs Uint8Array - read byted
copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes
copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes v2
ArrayBuffer Copy Benchmark (2)
copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes vs function
copy copy copy copy copy
DataView vs Uint8Array by bytes vs Uint8Array set Uint8Array
copy ArrayBuffer: DataView vs Uint8Array.set vs Float64Array.set vs by bytes (2)
copy ArrayBuffer: Uint8Array.set vs by bytes
Comments
Confirm delete:
Do you really want to delete benchmark?