Benchmark: CSS value prefixer RegExps

Script Preparation code:

var r1 = /^(?:(pos)|((?:max-|min-)?(?:widt|inl)|block-s)|(dis))/i;
var r2 = /^(?:(pos)|((?:max-|min-)?(?:widt|inl)|b.*?e)|(dis))/i;

var properties = [
  "position",
  "block-size",
  "min-width",
  "display",
  "min-inline-size",
  "inline-size",
  "width",
  "max-inline-size",
  "max-width"
];

Tests:

r1
var result = properties.map(function (property) { return r1.test(property); });
r2
var result = properties.map(function (property) { return r2.test(property); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
r1
r2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0

Browser/OS: Firefox 80 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
r1	3195313.8 Ops/sec
r2	3084996.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark, its options, pros and cons, and other considerations.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark that tests the performance of regular expression (Regex) patterns on different CSS values. Specifically, it measures how fast two different Regex patterns (`r1` and `r2`) can match against a list of CSS properties.

**Options compared:**

The benchmark compares two approaches:

1. **Regular Expression Pattern 1 (`r1`)**:
	* The pattern is `^(?:(pos)|((?:max-|min-)?(?:widt|inl)|block-s)|(dis))/i;`
	* This pattern uses a lookahead assertion to ensure that the matched string does not contain certain characters, and an anchor (`/i`) to make the search case-insensitive.
2. **Regular Expression Pattern 2 (`r2`)**:
	* The pattern is `^(?:(pos)|((?:max-|min-)?(?:widt|inl)|b.*?e)|(dis))/i;`
	* This pattern uses a negative lookahead assertion to match against strings that do not contain certain characters.

**Pros and Cons:**

1. **Pattern 1 (`r1`)**:
	* Pros:
		+ More efficient in terms of memory usage, as it avoids the overhead of recursive lookaheads.
		+ Faster execution times for larger input datasets.
	* Cons:
		+ May be less readable and maintainable due to its complexity.
2. **Pattern 2 (`r2`)**:
	* Pros:
		+ More concise and easier to read/maintain, as it uses a simpler syntax.
	* Cons:
		+ May be slower than `r1` for larger input datasets due to the overhead of recursive lookaheads.

**Library usage:**

Neither of the patterns uses an external library. However, the benchmark does use built-in JavaScript features such as regular expressions (`RegExp`) and array methods (`map()`).

**Special JS feature or syntax:**

There are no special JS features or syntax used in this benchmark.

**Other considerations:**

* The benchmark assumes that the input dataset is a list of CSS properties, which may not be representative of real-world use cases.
* The benchmark's focus on performance might lead to optimization over other aspects such as code readability and maintainability.
* The benchmark could benefit from additional test cases or variations to further validate its results.

**Alternatives:**

If you're interested in exploring alternative approaches, here are a few options:

1. **Use a different regular expression library**: Instead of using built-in JavaScript regex patterns, consider using an external library like `regex-escape` or `regex-execution-plan`.
2. **Try different optimization techniques**: Experiment with other performance optimization techniques, such as parallelization, caching, or memoization.
3. **Add more test cases or variations**: Extend the benchmark to include additional test cases, such as testing different input datasets, browsers, or devices.
4. **Use a different programming language**: Consider rewriting the benchmark in another programming language, such as C++ or Rust, to explore performance differences.

Related benchmarks:

CSS value prefixer RegExps (version: 3)

Comparing performance of: r1 vs r2

Created: 4 years ago by: Registered User

Jump to the latest result

r1

r2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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