Benchmark: Test getXAttrs with type

HTML Preparation code:

<div id="test" x-data="{}" x-bind:test="foo" x-on:click="alert('ok')"></div>

AخA
 
<div id="test" x-data="{}" x-bind:test="foo" x-on:click="alert('ok')"></div>

Tests:

PR #631

const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/

function isXAttr(attr) {
    const name = replaceAtAndColonWithStandardSyntax(attr.name)

    return xAttrRE.test(name)
}

function replaceAtAndColonWithStandardSyntax(name) {
    if (name.startsWith('@')) {
        return name.replace('@', 'x-on:')
    } else if (name.startsWith(':')) {
        return name.replace(':', 'x-bind:')
    }

    return name
}

function parseHtmlAttribute({ name, value }) {
    const normalizedName = replaceAtAndColonWithStandardSyntax(name)

    const typeMatch = normalizedName.match(xAttrRE)
    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)
    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

    return {
        type: typeMatch ? typeMatch[1] : null,
        value: valueMatch ? valueMatch[1] : null,
        modifiers: modifiers.map(i => i.replace('.', '')),
        expression: value,
    }
}

function getXAttrs(el, component, type) {
    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)

    // Get an object of directives from x-spread.
    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]

    if (spreadDirective) {
        let spreadObject = saferEval(spreadDirective.expression, component.$data)

        // Add x-spread directives to the pile of existing directives.
        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))
    }
    
    if (type) return directives.filter(i => i.type === type)

    return directives;
}

getXAttrs(document.getElementById('test'), {}, 'data')

​x
 
const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/​function isXAttr(attr) {    const name = replaceAtAndColonWithStandardSyntax(attr.name)​    return xAttrRE.test(name)}​function replaceAtAndColonWithStandardSyntax(name) {    if (name.startsWith('@')) {        return name.replace('@', 'x-on:')    } else if (name.startsWith(':')) {        return name.replace(':', 'x-bind:')    }​    return name}​function parseHtmlAttribute({ name, value }) {    const normalizedName = replaceAtAndColonWithStandardSyntax(name)​    const typeMatch = normalizedName.match(xAttrRE)    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []​    return {        type: typeMatch ? typeMatch[1] : null,        value: valueMatch ? valueMatch[1] : null,        modifiers: modifiers.map(i => i.replace('.', '')),        expression: value,    }}​function getXAttrs(el, component, type) {    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)​    // Get an object of directives from x-spread.    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]​    if (spreadDirective) {        let spreadObject = saferEval(spreadDirective.expression, component.$data)​        // Add x-spread directives to the pile of existing directives.        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))    }        if (type) return directives.filter(i => i.type === type)​    return directives;}​getXAttrs(document.getElementById('test'), {}, 'data')

v2.4.0

const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/

function isXAttr(attr) {
    const name = replaceAtAndColonWithStandardSyntax(attr.name)

    return xAttrRE.test(name)
}

function replaceAtAndColonWithStandardSyntax(name) {
    if (name.startsWith('@')) {
        return name.replace('@', 'x-on:')
    } else if (name.startsWith(':')) {
        return name.replace(':', 'x-bind:')
    }

    return name
}

function parseHtmlAttribute({ name, value }) {
    const normalizedName = replaceAtAndColonWithStandardSyntax(name)

    const typeMatch = normalizedName.match(xAttrRE)
    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)
    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []

    return {
        type: typeMatch ? typeMatch[1] : null,
        value: valueMatch ? valueMatch[1] : null,
        modifiers: modifiers.map(i => i.replace('.', '')),
        expression: value,
    }
}

function getXAttrs(el, component, type) {
    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)

    // Get an object of directives from x-spread.
    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]

    if (spreadDirective) {
        let spreadObject = saferEval(spreadDirective.expression, component.$data)

        // Add x-spread directives to the pile of existing directives.
        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))
    }

    return directives.filter(i => {
        // If no type is passed in for filtering, bypass filter
        if (! type) return true

        return i.type === type
    })
}

getXAttrs(document.getElementById('test'), {}, 'data')

 
const xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref|spread)\b/​function isXAttr(attr) {    const name = replaceAtAndColonWithStandardSyntax(attr.name)​    return xAttrRE.test(name)}​function replaceAtAndColonWithStandardSyntax(name) {    if (name.startsWith('@')) {        return name.replace('@', 'x-on:')    } else if (name.startsWith(':')) {        return name.replace(':', 'x-bind:')    }​    return name}​function parseHtmlAttribute({ name, value }) {    const normalizedName = replaceAtAndColonWithStandardSyntax(name)​    const typeMatch = normalizedName.match(xAttrRE)    const valueMatch = normalizedName.match(/:([a-zA-Z\-:]+)/)    const modifiers = normalizedName.match(/\.[^.\]]+(?=[^\]]*$)/g) || []​    return {        type: typeMatch ? typeMatch[1] : null,        value: valueMatch ? valueMatch[1] : null,        modifiers: modifiers.map(i => i.replace('.', '')),        expression: value,    }}​function getXAttrs(el, component, type) {    let directives = Array.from(el.attributes).filter(isXAttr).map(parseHtmlAttribute)​    // Get an object of directives from x-spread.    let spreadDirective = directives.filter(directive => directive.type === 'spread')[0]​    if (spreadDirective) {        let spreadObject = saferEval(spreadDirective.expression, component.$data)​        // Add x-spread directives to the pile of existing directives.        directives = directives.concat(Object.entries(spreadObject).map(([name, value]) => parseHtmlAttribute({ name, value })))    }​    return directives.filter(i => {        // If no type is passed in for filtering, bypass filter        if (! type) return true​        return i.type === type    })}​getXAttrs(document.getElementById('test'), {}, 'data')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
PR #631
v2.4.0

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
PR #631	159050.0 Ops/sec
v2.4.0	159082.6 Ops/sec

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

Measuring the performance of JavaScript microbenchmarks like TestGetXAttrs can be complex, so I'll break it down into understandable parts.

What is being tested?

The benchmark measures the performance of two functions: getXAttrs. This function takes an element (el), a component (component), and an optional type as input. It returns an array of directives extracted from the element's attributes, including ones generated by the x-spread feature.

Options being compared

The benchmark compares the performance of two versions of the getXAttrs function:

PR #631: This version has a slight difference in the filtering logic for the return value.
- In this version, if no type is passed as an argument, the filter returns true without checking the type property. This means that all directives are included in the output, even if they don't match the specified type.
v2.4.0: This version has a more traditional filtering logic for the return value.
- In this version, the filter checks if a type is provided and only returns directives with a matching type property.

Pros and Cons of each approach

PR #631:

Pros:

More inclusive filtering (may lead to slightly faster performance gains)
Simplified code

Cons:

May return incorrect results due to the loose filtering
Potential performance gain may be overestimated

v2.4.0:

Pros:

More accurate filtering (returns correct results, but potentially slower)
Clearer intent and easier to understand

Cons:

Less inclusive filtering (may lead to slightly slower performance gains)

Other considerations

x-spread: The x-spread feature is used to generate additional directives from the spread object in the getXAttrs function. This adds complexity and potential overhead to the benchmark.
saferEval: The saferEval function is used to safely evaluate the expression of a directive, which can introduce additional overhead due to security checks.

Alternative approaches

Simplified filtering: Implementing even looser filtering logic than PR #631 might further increase performance gains but also risks accuracy.
Parallelization: If possible, running multiple instances of getXAttrs in parallel could help reduce the overall execution time and provide more accurate results.
Profile-guided optimization: Using profiling tools to identify performance bottlenecks and optimizing those areas specifically can lead to better performance gains.

Keep in mind that these are just suggestions, and the best approach depends on the specific requirements and constraints of your project.

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks like TestGetXAttrs can be complex, so I'll break it down into understandable parts.

**What is being tested?**

The benchmark measures the performance of two functions: `getXAttrs`. This function takes an element (`el`), a component (`component`), and an optional type as input. It returns an array of directives extracted from the element's attributes, including ones generated by the `x-spread` feature.

**Options being compared**

The benchmark compares the performance of two versions of the `getXAttrs` function:

1. **PR #631**: This version has a slight difference in the filtering logic for the return value.
	* In this version, if no type is passed as an argument, the filter returns `true` without checking the `type` property. This means that all directives are included in the output, even if they don't match the specified type.
2. **v2.4.0**: This version has a more traditional filtering logic for the return value.
	* In this version, the filter checks if a type is provided and only returns directives with a matching `type` property.

**Pros and Cons of each approach**

**PR #631:**

Pros:

* More inclusive filtering (may lead to slightly faster performance gains)
* Simplified code

Cons:

* May return incorrect results due to the loose filtering
* Potential performance gain may be overestimated

**v2.4.0:**

Pros:

* More accurate filtering (returns correct results, but potentially slower)
* Clearer intent and easier to understand

Cons:

* Less inclusive filtering (may lead to slightly slower performance gains)

**Other considerations**

1. **x-spread**: The `x-spread` feature is used to generate additional directives from the spread object in the `getXAttrs` function. This adds complexity and potential overhead to the benchmark.
2. **saferEval**: The `saferEval` function is used to safely evaluate the expression of a directive, which can introduce additional overhead due to security checks.

**Alternative approaches**

1. **Simplified filtering**: Implementing even looser filtering logic than PR #631 might further increase performance gains but also risks accuracy.
2. **Parallelization**: If possible, running multiple instances of `getXAttrs` in parallel could help reduce the overall execution time and provide more accurate results.
3. **Profile-guided optimization**: Using profiling tools to identify performance bottlenecks and optimizing those areas specifically can lead to better performance gains.

Keep in mind that these are just suggestions, and the best approach depends on the specific requirements and constraints of your project.

Related benchmarks:

Test getXAttrs with type (version: 0)

Comparing performance of: PR #631 vs v2.4.0

Created: 4 years ago by: Guest

Jump to the latest result

PR #631

v2.4.0

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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