Benchmark: URL object vs split to get canonical url

HTML Preparation code:

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

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
  const url = 'https://www.marksandspencer.com/l/kids/girls/footwear/boots/fs5/chelsea-boots?test=test&foo=foo#something'
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

Tests:

split
const [ parsedUrl ] = url.split('?');
url
const urlOb = new URL(url); const parsedUrl = `${urlOb.origin}${urlOb.pathname}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
split
url

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

split

7.3M/s

url

360K/s

View exact numbers

Test name	Executions per second
✓ split	7,283,220 Ops/sec
url	360,114 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark provided compares two different approaches for extracting the canonical URL from a complete URL string. The two methods being tested are:

1. **Using the String `split` Method**:
   - **Benchmark Definition**: `const [ parsedUrl ] = url.split('?');`
   - **Test Name**: "split"

2. **Using the URL Object**:
   - **Benchmark Definition**: `const urlOb = new URL(url); const parsedUrl = \`${urlOb.origin}${urlOb.pathname}\`;`
   - **Test Name**: "url"

### Options Compared

- **`split` Method**:
  - This method utilizes the JavaScript string method `split()` to separate the URL at the `?`, effectively discarding the query parameters and retaining only the base URL (also known as the canonical URL).
  
- **`URL` Object**:
  - This method leverages the built-in `URL` constructor to create a URL object from a string. The `origin` and `pathname` properties of the URL object are then used to reconstruct the canonical URL.

### Pros and Cons

- **`split` Method**:
  - **Pros**:
    - Simplicity: The code is straightforward and easy to understand.
    - Performance: In the benchmark results, this approach executes significantly faster, with approximately 40,784,552 executions per second.
  - **Cons**:
    - Limited capabilities: The `split` method is less robust for complex URL manipulations or validations. It assumes that the provided string is a valid URL format.
    - Doesn't handle edge cases (e.g., malformed URLs).

- **`URL` Object**:
  - **Pros**:
    - Robustness: The `URL` object is designed to manage URLs more comprehensively, handling various edge cases and providing methods to manipulate URL components easily.
    - Readability: Properties like `origin` and `pathname` make it clear what parts of the URL are being accessed.
  - **Cons**:
    - Performance: In the benchmark result, the URL object method executed at approximately 1,377,064.375 executions per second, which is significantly slower than the string split method.
    - Slightly more complex: While still quite easy to use, there is a bit more overhead in creating a `URL` object as compared to a simple string operation.

### Other Considerations

- **Use Case**: The choice between these two methods may depend on the context of the application. If a robust handling of URLs is required, the `URL` method is preferable despite its performance cost. However, for performance-critical applications where URLs are guaranteed to be well-formed, the `split` method may be the better option.
  
- **Browser Compatibility**: The `URL` object might not be supported in very old browsers; although it's widely supported in modern browsers. Developers must consider the environments in which their applications will run.

### Alternatives

- **Regular Expressions**: Another alternative for parsing URLs could be using regular expressions. This method can provide flexibility and allow for complex parsing requirements, though it may be less readable and more error-prone than the built-in options. Performance could be a concern depending on the complexity of the regex.

- **Third-party Libraries**: Libraries like `query-string` or `url-parse` can be leveraged for more advanced URL manipulations, but these come with their own performance implications and add external dependencies to the project.

In summary, the benchmark measures two distinct strategies for parsing URLs, with trade-offs between performance and robustness. The decision on which method to use should align with the project's specific requirements and constraints.

URL object vs split to get canonical url (version: 1)

Comparing performance of: `split vs url`

Created: one year ago by: Guest

Go to the latest result

split

url

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

URL object vs split to get canonical url (version: 1)

Comparing performance of: split vs url

Created: one year ago by: Guest

Go to the latest result

split

url

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `split vs url`