Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test getXAttrs with type
(version: 0)
Comparing performance of:
PR #631 vs v2.4.0
Created:
5 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<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')
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')
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
PR #631
v2.4.0
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year 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: 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
ID vs Class vs Data Attr
Pierre benchmark
Dataset vs getAttribute vs Property v2.1
Comments
Confirm delete:
Do you really want to delete benchmark?