Benchmark: IDL-Attributes vs URI.js vs native URL vs webcomponents/url

HTML Preparation code:

<script>forceJURL = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.1/URI.js"></script>
<script src="https://raw.githubusercontent.com/webcomponents/URL/v0.7.3/url.js"></script>

Tests:

IDL-Attributes
var a = document.createElement('a'); a.href = 'http://www.example.org/path/to/file.html?some=param#hash'; a.pathname = '/path/to/other/file.html'; a.href + '';
URI.js
var a = new URI('http://www.example.org/path/to/file.html?some=param#hash'); a.pathname('/path/to/other/file.html'); a.href();
new URL()
var u = new URL('http://www.example.org/path/to/file.html?some=param#hash'); u.pathname = '/path/to/other/file.html'; u.toString();
webcomponents/URL
var u = new URL('http://www.example.org/path/to/file.html?some=param#hash'); u.pathname = '/path/to/other/file.html'; u.toString();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
IDL-Attributes
URI.js
new URL()
webcomponents/URL

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
IDL-Attributes	543798.9 Ops/sec
URI.js	252097.8 Ops/sec
new URL()	948301.9 Ops/sec
webcomponents/URL	946155.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is tested on the provided JSON?**

The provided JSON represents four individual test cases, each designed to measure the performance of a specific way to handle URLs in JavaScript:

1. **IDL-Attributes**: This test case uses the built-in `href` attribute of HTML elements to construct and manipulate URLs.
2. **URI.js**: This test case uses the popular URI.js library to work with URLs.
3. **new URL()**: This test case uses the native `URL` API, which is a part of the ECMAScript standard, to work with URLs.
4. **webcomponents/URL**: This test case uses a custom implementation of the `URL` class from the webcomponents library.

**Options compared**

Each test case compares the performance of one or more of these approaches to handle URLs:

* Construction and manipulation of URLs
* Execution frequency per second

**Pros and Cons of each approach:**

1. **IDL-Attributes**:
	* Pros: Native implementation, low overhead.
	* Cons: May not work as expected in all scenarios (e.g., no built-in support for query parameters or fragment IDs).
2. **URI.js**:
	* Pros: Mature library with extensive feature set, robust documentation.
	* Cons: Adds external dependency, may introduce additional overhead due to parsing and serialization.
3. **new URL()**:
	* Pros: Native implementation, high performance, and low overhead.
	* Cons: Requires modern browsers (supporting ECMAScript 6+) and may not work in older browsers.
4. **webcomponents/URL**:
	* Pros: Custom implementation with fine-grained control over behavior.
	* Cons: May require additional setup and configuration, and its performance might be lower compared to the native `URL` API.

**Library usage**

The URI.js library is used in Test Case 2 (`URI.js`). This library provides a robust set of features for working with URLs, including parsing, serialization, and manipulation. The webcomponents library is used in Test Case 4 (`webcomponents/URL`), which provides a custom implementation of the `URL` class.

**Special JS feature or syntax**

No special JavaScript features or syntax are used in these test cases. However, it's worth noting that the use of modern ECMAScript features (e.g., arrow functions, template literals) is implicit due to the use of recent JavaScript versions.

**Other alternatives**

If you're looking for alternative approaches to handle URLs in JavaScript:

* **URLSearchParams**: For parsing and manipulating query parameters.
* **DOMParser**: For parsing URL fragments.
* **fetch API**: For making HTTP requests with URLs as input.

Keep in mind that these alternatives might not be directly comparable to the approaches tested on MeasureThat.net, but they can still be useful in other contexts.

Related benchmarks:

IDL-Attributes vs URI.js vs native URL vs webcomponents/url (version: 2)

Comparing performance of: IDL-Attributes vs URI.js vs new URL() vs webcomponents/URL

Created: 6 years ago by: Registered User

Jump to the latest result

IDL-Attributes

URI.js

new URL()

webcomponents/URL

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):