Benchmark: DOMParser vs Template element

Tests:

DOMParser
/** * Creates a virtual DOM tree from an HTML string. * * @param {string} htmlString - The HTML string to parse. * @return {Object} The root node of the virtual DOM tree. */ function createVirtualDOM(htmlString) { // Use DOMParser to parse the HTML string into a DOM tree const parser = new DOMParser(); const doc = parser.parseFromString(htmlString, "text/html"); const rootNode = doc.body; /** * Recursively creates a virtual DOM node from a DOM element. * * @param {Element} element - The DOM element to create a virtual node from. * @return {Object} The virtual DOM node. */ function createNode(element) { // Create a virtual DOM node with the element's tag name and attributes const node = { tagName: element.tagName, attributes: {} }; // Add the element's attributes to the virtual node for (let i = 0; i < element.attributes.length; i++) { const attribute = element.attributes[i]; node.attributes[attribute.name] = attribute.value; } // If the element has child nodes, create virtual nodes for them as well if (element.childNodes.length > 0) { node.children = []; for (let i = 0; i < element.childNodes.length; i++) { const child = element.childNodes[i]; //console.log(child.tagName) if (!child.tagName) continue; if (child.nodeType === Node.ELEMENT_NODE) { // Recursively create a virtual node for the child element node.children.push(createNode(child)); } else if (child.nodeType === Node.TEXT_NODE) { // Create a virtual node for the child text node node.children.push({ tagName: null, text: child.textContent }); } } } return element.tagName === 'BODY' ? node.children : node; //return node; } // Return the root virtual DOM node return createNode(rootNode); } const vdom = createVirtualDOM(`<div> <h4>Income</h4> <p id="money-plus" class="money plus"><placeholder data-id="income"/></p> </div> <div> <h4>Expense</h4> <p id="money-minus" class="money minus"><placeholder data-id="expense"/></p> <input type="text" disabled /> <div class="inner"></div> </div>`);
Template element
/** * Creates a virtual DOM tree from an HTML string. * * @param {string} htmlString - The HTML string to parse. * @return {Object} The root node of the virtual DOM tree. */ function createVirtualDOM(htmlString) { /** * Recursively creates a virtual DOM node from a DOM element. * * @param {Element} element - The DOM element to create a virtual node from. * @return {Object} The virtual DOM node. */ function createNode(element) { //console.log(elements) // Create a virtual DOM node with the element's tag name and attributes const node = { tagName: element.tagName, attributes: {} }; // Add the element's attributes to the virtual node for (let i = 0; i < element.attributes.length; i++) { const attribute = element.attributes[i]; node.attributes[attribute.name] = attribute.value; } // If the element has child nodes, create virtual nodes for them as well if (element.childNodes.length > 0) { node.children = []; for (let i = 0; i < element.childNodes.length; i++) { const child = element.childNodes[i]; //console.log(child.tagName) if (!child.tagName) continue; if (child.nodeType === Node.ELEMENT_NODE) { // Recursively create a virtual node for the child element node.children.push(createNode(child)); } else if (child.nodeType === Node.TEXT_NODE) { // Create a virtual node for the child text node node.children.push({ tagName: null, text: child.textContent }); } } } return node; } var t = document.createElement('template'); t.innerHTML = `<t>${htmlString}</t>`; //const rootNodes = [...t.content.querySelectorAll('t > *')] const nodes = []; t.content.querySelectorAll('t > *').forEach(element => nodes.push(createNode(element))); // Return the root virtual DOM node return nodes; } const vdom = createVirtualDOM(`<div> <h4>Income</h4> <p id="money-plus" class="money plus"><placeholder data-id="income"/></p> </div> <div> <h4>Expense</h4> <p id="money-minus" class="money minus"><placeholder data-id="expense"/></p> <input type="text" disabled /> <div class="inner"></div> </div>`);

Test name	Executions per second
✓ Template element	13,772 Ops/sec
DOMParser	9,840 Ops/sec

DOMParser vs Template element (version: 1)

Testing

Comparing performance of: `DOMParser vs Template element`

Created: one year ago by: Guest

Go to the latest result

DOMParser

Template element

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

DOMParser vs Template element (version: 1)

Testing

Comparing performance of: DOMParser vs Template element

Created: one year ago by: Guest

Go to the latest result

DOMParser

Template element

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `DOMParser vs Template element`