Benchmark: string.slice vs regex

Script Preparation code:

const strings = [ 'onclick', 'onwheel', 'onresize', 'noclick', 'nowheel', 'noresize' ];
function getStrings() {
  return strings;
}

Tests:

regex
const regex = /^on/ for( let i = 0; i < 10000; i++ ) { getStrings().forEach( str => regex.test( str ) ); }
slice
for( let i = 0; i < 10000; i++ ) { getStrings().forEach( str => str.slice(0, 2) === 'on' ); }
array
for( let i = 0; i < 10000; i++ ) { getStrings().forEach( str => str[ 0 ] === 'o' && str[ 1 ] === 'n' ); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
regex
slice
array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
regex	770.0 Ops/sec
slice	9047.4 Ops/sec
array	3958.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks.

**What is being tested?**

The provided benchmark compares three different approaches to test whether a given string starts with the substring 'on'. The three approaches are:

1. **Regex (Regular Expression)**: Using the `/^on/` regex pattern to match strings that start with 'on'.
2. **String slicing**: Using the `slice()` method to extract the first two characters of each string and then comparing them to 'on' using the equality operator (`===`).
3. **Array indexing**: Using array indexing to access the first character of each string and then comparing it to 'o' and the second character to 'n' using the equality operator (`===`).

**Options compared**

The benchmark compares the performance of these three approaches in terms of the number of executions per second.

**Pros and cons of each approach**

1. **Regex**:
	* Pros: Efficient and concise way to match patterns.
	* Cons: Can be slower for large strings due to the overhead of compiling the regex pattern, and may not work well with non-ASCII characters or complex patterns.
2. **String slicing**:
	* Pros: Simple and efficient way to extract substrings from strings.
	* Cons: May not work well with large strings, as it creates multiple temporary arrays.
3. **Array indexing**:
	* Pros: Fast and efficient way to access individual characters in an array.
	* Cons: Requires an array of strings, which can be memory-intensive.

**Library usage**

The benchmark uses the `strings` array created in the "Script Preparation Code" section, which contains 10 strings. This array is used as input for each test case.

**Special JavaScript feature or syntax**

None mentioned.

**Benchmark results**

The latest benchmark results show that:

* The "slice" approach outperforms both the regex and "array" approaches.
* The "regex" approach performs poorly, likely due to the overhead of compiling the pattern.
* The "array" approach is slower than the "slice" approach but faster than the "regex" approach.

**Alternatives**

If you need more performance or a different approach, consider using:

* **String.prototype.startsWith()**: This method is similar to the regex approach but may be faster and more efficient for matching substrings.
* **Array.prototype.map() + String.prototype.indexOf()**: This approach can provide a good balance between performance and conciseness.

Keep in mind that benchmarking results may vary depending on the specific use case, hardware, and software environment.

Related benchmarks:

string.slice vs regex (version: 0)

Comparing performance of: regex vs slice vs array

Created: 4 years ago by: Registered User

Jump to the latest result

regex

slice

array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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