Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
fetch.arrayBuffer() vs fetch.bytes() 2
(version: 1)
Comparing performance of:
fetch.arrayBuffer() vs fetch.bytes()
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<!--your preparation HTML code goes here-->
Tests:
fetch.arrayBuffer()
[Async/Deferred]
var response = await fetch('data:image/png;base64,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'); await response.arrayBuffer(); deferred.resolve();
fetch.bytes()
[Async/Deferred]
var response = await fetch('data:image/png;base64,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'); await response.bytes(); deferred.resolve();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
fetch.arrayBuffer()
fetch.bytes()
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Browser/OS:
Chrome 133 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=585587" width="100%" height="500px"></iframe>
fetch.arrayBuffer()
18K/s
fetch.bytes()
18K/s
View exact numbers
Test name
Executions per second
✓
fetch.arrayBuffer()
17,766 Ops/sec
fetch.bytes()
17,653 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark provided focuses on comparing the performance of two different methods in the JavaScript Fetch API for retrieving data: `fetch.arrayBuffer()` and `fetch.bytes()`. Both benchmarks test the loading of a base64-encoded image using URL data from a 'data:' URI. ### Methods Compared 1. **fetch.arrayBuffer()** - This method retrieves a response from a network request and returns it as an `ArrayBuffer`. An `ArrayBuffer` is a generic, fixed-length raw binary data buffer in JavaScript. It is useful for handling binary data in a way that is compatible with other binary formats (like Typed Arrays or binary file data). 2. **fetch.bytes()** - This method does not exist in the standard Fetch API. The interpretation here suggests it could be an alias or a pseudo method that conceptually retrieves the same data but returns it in a different format (likely a simpler byte array). However, without documentation or specification, it's important to recognize that this is not a standard API method and could create confusion if not defined properly. ### Performance Metrics From the benchmark results: - **fetch.arrayBuffer()** executed at approximately **17765 requests per second**. - **fetch.bytes()** executed at approximately **17653 requests per second**. This indicates that `fetch.arrayBuffer()` performed slightly better than `fetch.bytes()`, albeit within a margin that may not be significant in practical applications. ### Pros and Cons #### fetch.arrayBuffer() **Pros:** - Suitable for working with binary data. - Can be easily manipulated with Typed Arrays (e.g., `Uint8Array`). - Widely supported and documented. **Cons:** - More overhead for simple use cases where only a byte array is required. - Requires more understanding of binary data manipulation. #### fetch.bytes() **Pros:** - Conceptually simpler for developers who only need to work with byte arrays. - Could be faster if optimized for specific use cases. **Cons:** - The method is non-standard, which could lead to maintainability issues. - Lack of documentation makes it hard to understand its behavior and performance implications. ### Other Considerations - **Compatibility:** The usage of non-standard methods like `fetch.bytes()` can lead to compatibility issues across different browsers or environments. Developers should be cautious and ideally use standard methods to ensure code longevity and portability. - **Use Cases:** The choice between these methods should also consider actual use cases. If manipulating binary data is frequent, `fetch.arrayBuffer()` is likely the better choice due to its flexibility. Conversely, in cases where only byte-level data is required, a custom implementation or alternative library might provide better integration or simplicity. ### Alternatives Other alternatives for fetching binary data in JavaScript include: - Using third-party libraries or frameworks, such as Axios, which can handle various response types more seamlessly. - Making use of `fetch.blob()` if image or video data is the primary concern, as it provides a more straightforward interface for working with media files. - Utilizing WebSockets or Server-Sent Events if continuous data streaming is fundamental to the application, although this does not directly provide a comparison with the fetch methods being tested. In summary, developers should weigh the benefits of using standard JavaScript methods like `fetch.arrayBuffer()` against the potential pitfalls of using non-standard methods like `fetch.bytes()`, while considering the actual data handling needs of their applications.
Related benchmarks
drawImage: Copy from image or canvas fixed
fetch.arrayBuffer() vs fetch.bytes()
Comments
Confirm delete:
Do you really want to delete benchmark?