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

HTML Preparation code:

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

AخA
 
<!--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();
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();
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
fetch.arrayBuffer()
fetch.bytes()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months 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 3 months 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

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).
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.

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: 3 months ago by: Guest

Jump to the latest result

fetch.arrayBuffer() [Async/Deferred]

fetch.bytes() [Async/Deferred]