Benchmark: CORS Test - MeasureThat.net

Script Preparation code:

// For accuracy declare the regex in root scope
// assume this tester doesnt rerun the setup on each test case
const DOMAIN_TO_LOCALE = Object.freeze({
    com: 'en-us',
    dk: 'da',
    de: 'de',
    fr: 'fr-fr',
    no: 'nb',
    pt: 'pt',
    se: 'sv',
    'com.br': 'pt-br',
    'com.es': 'es',
});
const FOO_VALID_TLDS = Object.keys(DOMAIN_TO_LOCALE).join('|');
const FOO_DOMAIN_REGEX = new RegExp(
    `^https://(?:[\\w-]+\\.)*foo\\.(?:${FOO_VALID_TLDS})\\.?(?::[\\d]{1,5})?$`
);

function checkRegex(url) {
    return FOO_DOMAIN_REGEX.test(url)
}

function checkProcedural(url) {
    const {
        protocol,
        hostname
    } = new URL(url);
    const [subdomain, tld] = hostname.split('foo.');
  
    if (typeof tld === 'undefined') return;

    const isSecure = protocol.startsWith('https');
    const isValidTld = tld in DOMAIN_TO_LOCALE;

    return isSecure && isValidTld;
}

window.validCases = [
    'https://foo.com',
    'https://bar.foo.com',
    'https://foo.bar.foo.com',
    'https://BAR.foo.com',
    'https://-_47.foo.com',
    'https://foo.foo.com',
    'https://foo.com:1',
    'https://foo.com:65535',
    'https://foo.com.',
    'https://foo.com.:47',
    'https://foo.fr',
    'https://develop.foo.fr',
    'https://develop.nested.foo.fr',
    'https://develop.nested.foo.com.es',
];

window.invalidCases = [
    'https://foo.com.fake.com',
    'https://foo.com.org',
    'https://foofoo.com',
    'file://foo.com',
    'http://foo.com',
    'https://.foo.com',
];

Tests:

Regex: Valid Cases
validCases.every(url => checkRegex(url));
Regex: Invalid Cases
invalidCases.every(url => !checkRegex(url));
Procedural: Valid Cases
validCases.every(url => checkProcedural(url));
Procedural: Invalid Cases
invalidCases.every(url => !checkProcedural(url));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Regex: Valid Cases
Regex: Invalid Cases
Procedural: Valid Cases
Procedural: Invalid Cases

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Regex: Invalid Cases

2.5M/s

Regex: Valid Cases

1.1M/s

Procedural: Valid Cases

448K/s

Procedural: Invalid Cases

442K/s

View exact numbers

Test name	Executions per second
✓ Regex: Invalid Cases	2,530,044 Ops/sec
Regex: Valid Cases	1,063,380 Ops/sec
Procedural: Valid Cases	447,856 Ops/sec
Procedural: Invalid Cases	442,046 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the benchmark and its various approaches.

**Benchmark Definition**

The benchmark is designed to test the performance of JavaScript in handling CORS (Cross-Origin Resource Sharing) scenarios. The tests aim to measure the time taken by different browsers to execute two types of checks: a regular expression-based check and a procedural check.

**Regular Expression-Based Check**

The first set of test cases uses a regular expression (`FOO_DOMAIN_REGEX`) to validate URLs that contain the string "foo." followed by a valid top-level domain (TLD) from a predefined list. The `checkRegex` function takes a URL as input and returns true if it matches the regular expression, indicating a valid case.

**Procedural Check**

The second set of test cases uses a procedural approach to validate URLs. It extracts the subdomain and TLD from the hostname part of the URL and checks if the resulting combination is present in the `DOMAIN_TO_LOCALE` object. The `checkProcedural` function takes a URL as input, determines its validity based on this procedure, and returns true for valid cases.

**Options Compared**

The benchmark compares two approaches:

1. **Regular Expression-Based Check**: This approach uses a predefined regular expression to validate URLs.
2. **Procedural Check**: This approach extracts the subdomain and TLD from the hostname part of the URL and checks if they match a predefined list.

**Pros and Cons**

* **Regular Expression-Based Check**
	+ Pros:
		- Easy to implement
		- Fast execution time (as it's a simple regular expression)
	+ Cons:
		- May be less accurate due to edge cases or misconfigured domains
		- Might not handle all possible domain formats correctly
* **Procedural Check**
	+ Pros:
		- More accurate than the regular expression-based approach, as it takes into account more domain formats and subdomain combinations
		- Can handle edge cases where a regular expression might fail
	+ Cons:
		- Slower execution time due to string manipulation and object lookups
		- May be more prone to errors or false positives if not implemented correctly

**Library Usage**

The benchmark uses the `URL` API, which is part of the JavaScript standard library, to extract the hostname and protocol parts of a URL.

**Special JS Features or Syntax**

There are no special features or syntax mentioned in the benchmark definition. The tests rely on basic JavaScript functionality and regular expressions.

**Other Alternatives**

If you're looking for alternative approaches to handling CORS scenarios in your own projects, you might consider using:

1. **Proxy servers**: Set up a proxy server that can handle CORS requests and forward them to the intended destination.
2. **CORS libraries or frameworks**: Utilize dedicated libraries or frameworks that provide built-in support for CORS, such as Axios or the Fetch API with CORS headers.
3. **Custom implementations**: Develop your own custom solution using JavaScript and web servers, which can be tailored to specific requirements.

Keep in mind that each approach has its pros and cons, and choosing the right one depends on the specific needs of your project.

CORS Test (version: 2) Benchmark.js

Comparing performance of: `Regex: Valid Cases vs Regex: Invalid Cases vs Procedural: Valid Cases vs Procedural: Invalid Cases`

Created: 5 years ago by: Registered User

Go to the latest result

Regex: Valid Cases

Regex: Invalid Cases

Procedural: Valid Cases

Procedural: Invalid Cases

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

CORS Test (version: 2) Benchmark.js

Comparing performance of: Regex: Valid Cases vs Regex: Invalid Cases vs Procedural: Valid Cases vs Procedural: Invalid Cases

Created: 5 years ago by: Registered User

Go to the latest result

Regex: Valid Cases

Regex: Invalid Cases

Procedural: Valid Cases

Procedural: Invalid Cases

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Regex: Valid Cases vs Regex: Invalid Cases vs Procedural: Valid Cases vs Procedural: Invalid Cases`