Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test getXAttrs
(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'))
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'))
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):
I'll break down the benchmark and its components to explain what's being tested. **What is being tested?** The provided JSON represents two test cases for measuring the performance of the `getXAttrs` function in Vue.js, which is used to parse and extract attributes from HTML elements. The main goal is to determine how long it takes to execute this function on different inputs. **Options compared:** There are two main options being tested: 1. **Type filtering**: In the first test case (`PR #631`), the `getXAttrs` function returns all directives, regardless of the type passed as an argument. 2. **Type filtering with type argument**: In the second test case (`v2.4.0`), the `getXAttrs` function filters directives by type if a type argument is provided. **Pros and Cons:** 1. **Type filtering without type argument**: * Pros: This option allows for more flexibility, as the function will always return all available directives. * Cons: This might result in slower performance since more data needs to be processed. 2. **Type filtering with type argument**: * Pros: This option can improve performance by reducing the amount of data that needs to be processed. * Cons: If a specific type is requested, the function will only return directives of that type, potentially leading to slower performance if no matching directives are found. **Library and purpose:** The `getXAttrs` function uses the `x-data`, `x-bind`, `x-on`, and `x-spread` libraries from Vue.js. These libraries provide a declarative way to bind data and behavior to HTML elements in Vue applications. * `x-data` allows you to define data for your components. * `x-bind` binds a component's data to an element's attributes. * `x-on` defines event listeners on the component. * `x-spread` enables the use of JavaScript expressions (e.g., spread operators) in Vue templates. **Special JS feature:** The `saferEval` function is used to evaluate the expression passed as part of the `x-spread` directive. This function helps prevent security vulnerabilities by safely evaluating user-provided code. Other alternatives for testing performance might include: * Comparing the execution times with different input sizes or types. * Testing the performance of alternative parsing functions or libraries. * Measuring the memory usage and garbage collection efficiency of each option. * Using a benchmarking framework to automate the process of measuring performance.
Related benchmarks:
testasdasd
Native XHR vs jQuery Ajax
Native XHR vs jQuery Ajax 3.3.1
querySelector by attributte vs getElementById
XHR vs fetch (HTML parsing, append)
Comments
Confirm delete:
Do you really want to delete benchmark?