Benchmark: Compare detecting object keys starting with "on"

Script Preparation code:

function noop(){};

const attrs = {
  id: 'test',
  onclick: noop,
  class: 'test'
};

function getAttrs() {
  return attrs;
}

function getElem() {
  return document.createElement('div');
}

Tests:

RegEx
const el = getElem(); const attrs = getAttrs(); const re = /^on/; Object.keys(attrs).forEach( attr => { if( re.test( attr ) ) { el[ attr ] = attrs[ attr ]; } else { el.setAttribute( attr, attrs[ attr ] ); } });
Substr
const el = getElem(); const attrs = getAttrs(); Object.keys(attrs).forEach( attr => { if( attr.substr( 0, 2 ) === 'on' ) { el[ attr ] = attrs[ attr ]; } else { el.setAttribute( attr, attrs[ attr ] ); } });
charAt
const el = getElem(); const attrs = getAttrs(); Object.keys(attrs).forEach( attr => { if( attr.charAt( 0 ) === 'o' && attr.charAt( 1 ) === 'n' ) { el[ attr ] = attrs[ attr ]; } else { el.setAttribute( attr, attrs[ attr ] ); } });
Array access
const el = getElem(); const attrs = getAttrs(); Object.keys(attrs).forEach( attr => { if( attr[ 0 ] === 'o' && attr[ 1 ] === 'n' ) { el[ attr ] = attrs[ attr ]; } else { el.setAttribute( attr, attrs[ attr ] ); } });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RegEx
Substr
charAt
Array access

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

Browser/OS: Firefox 99 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
RegEx	686168.0 Ops/sec
Substr	625773.0 Ops/sec
charAt	571589.8 Ops/sec
Array access	532780.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark, hosted on MeasureThat.net, aims to compare the performance of three different approaches for detecting object keys in an object that start with the string "on". The benchmark consists of four test cases:

1. Using regular expressions (RegEx)
2. Using the `substr` method
3. Using the `charAt` method
4. Using array access

**Library:**

None of the provided code uses a specific JavaScript library, but it does use the built-in `Object.keys()` and `Array.prototype.forEach()` methods.

**Special JS Feature/Syntax:**

None of the test cases explicitly use any special JavaScript features or syntax beyond what is required for the comparison.

**Approaches Compared:**

The benchmark compares four approaches to detect object keys that start with "on":

1. **RegEx**: This approach uses a regular expression (`^on/`) to match keys that start with "on".
2. **Substr**: This approach uses the `substr` method to extract the first two characters of each key.
3. **charAt**: This approach uses the `charAt` method to access the first character of each key.
4. **Array access**: This approach uses array access (`attr[0] === 'o' && attr[1] === 'n'`) to compare the first two characters of each key.

**Pros and Cons of Each Approach:**

1. **RegEx**:
	* Pros: Fast and efficient, as regular expressions are optimized for performance.
	* Cons: May be slower than other approaches if not properly optimized, and can be less readable due to its complexity.
2. **Substr**:
	* Pros: Simple and easy to read, as it uses a well-known method for substring extraction.
	* Cons: May be slower than RegEx due to the overhead of string slicing.
3. **charAt**:
	* Pros: Simple and easy to read, as it uses a well-known method for character access.
	* Cons: May be slower than RegEx or Substr due to the overhead of accessing individual characters.
4. **Array access**:
	* Pros: Fast and efficient, as array access is optimized for performance.
	* Cons: Less readable due to its use of implicit comparison.

**Other Considerations:**

When choosing an approach, consider the trade-off between performance and readability. RegEx might be the fastest but also the most complex, while array access might be the most readable but slightly slower.

In general, if you need a balance between speed and readability, `charAt` or `substr` might be good choices. If performance is critical and readability can be sacrificed, RegEx might be the best option.

Related benchmarks:

Compare detecting object keys starting with "on" (version: 0)

Comparing performance of: RegEx vs Substr vs charAt vs Array access

Created: 2 years ago by: Registered User

Jump to the latest result

RegEx

Substr

charAt

Array access

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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