Benchmark: fetch.arrayBuffer() vs fetch.bytes() 2

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>

Previous results

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

Test name	Executions per second
fetch.arrayBuffer()	17765.9 Ops/sec
fetch.bytes()	17653.4 Ops/sec

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

LLMs can make mistakes. Check important info.

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:

fetch.arrayBuffer() vs fetch.bytes() 2 (version: 1)

Comparing performance of: fetch.arrayBuffer() vs fetch.bytes()

Created: one year ago by: Guest

Jump to the latest result

fetch.arrayBuffer() [Async/Deferred]

fetch.bytes() [Async/Deferred]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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