Benchmark: URL parsing and matching

Script Preparation code:

var href = 'https://www.testsite.com/some-path/another-path/2019/images/image.png';

var ASSETS_REGEX = new RegExp(
  `^https://www.testsite.com(?<publicPath>/some-path/another-path/2019/)(?<assetPath>(?:fonts|images)/.+)`,
);

Tests:

regex
const match = href.match(ASSETS_REGEX) if (match) { const { publicPath, assetPath } = match return }
new URL
const url = new URL(href) const pathName = url.pathname.replace("/some-path/another-path/2019/", "") return url.origin === "https://www.testsite.com" && (pathName.startsWith('fonts') || pathName.startsWith('images'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
regex
new URL

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
regex	9591356.0 Ops/sec
new URL	765029.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its options.

**Benchmark Overview**

The benchmark measures the performance of two approaches for URL parsing and matching: regular expressions (regex) and the `URL` API.

**Script Preparation Code**

The script preparation code defines:

1. A variable `href` with a sample URL: `https://www.testsite.com/some-path/another-path/2019/images/image.png`.
2. A regex pattern `ASSETS_REGEX` that captures two groups:
	* `publicPath`: matches the `/some-path/another-path/2019/` part of the URL.
	* `assetPath`: matches either `/fonts/.*` or `/images/.*`, depending on the group index.

**Html Preparation Code**

There is no HTML preparation code provided, which means that the benchmark only tests the JavaScript functions and does not involve rendering any HTML pages.

**Individual Test Cases**

There are two test cases:

### regex

This test case uses the `ASSETS_REGEX` pattern to match the URL. It extracts the `publicPath` and `assetPath` from the match and returns a value if the match exists.

**Library Used:** None (built-in JavaScript functions)

**Special JS Feature/Syntax:** The use of named capture groups (`(?<publicPath>...)`) in the regex pattern is a feature introduced in ECMAScript 2018 (ES2018). This allows for more readable and maintainable regex patterns by assigning names to capture groups.

### new URL

This test case uses the `URL` API to parse the URL. It extracts the path name, origin, and scheme from the parsed URL and returns a value if the conditions are met.

**Library Used:** The `URL` API is part of the ECMAScript 6 (ES2015) specification.

**Alternatives**

The two approaches compared in this benchmark have different pros and cons:

1. **Regex**:
	* Pros: Simple, lightweight, and widely supported.
	* Cons: Can be slower than other methods, especially for complex patterns.
2. **URL API**:
	* Pros: Faster, more modern, and provides a more intuitive interface for URL manipulation.
	* Cons: Requires ECMAScript 6 (ES2015) support, which may not be available in older browsers or environments.

Other alternatives to consider:

1. **URLSearchParams**: For parsing query strings, this API is more efficient than regex-based solutions.
2. **DOMParser** and **XMLHttpRequest**: These APIs can also be used for URL manipulation, but they are less intuitive and may have performance implications.

Keep in mind that the choice of approach depends on the specific use case, performance requirements, and compatibility constraints.

Related benchmarks:

URL parsing and matching (version: 0)

Comparing performance of: regex vs new URL

Created: one year ago by: Guest

Jump to the latest result

regex

new 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):