Benchmark: DOMParser vs Template element

HTML Preparation code:

<!--your preparation HTML code goes here-->

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>`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMParser
Template element

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:150.0) Gecko/20100101 Firefox/150.0

Browser/OS: Firefox 150 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
DOMParser	9839.8 Ops/sec
Template element	13771.5 Ops/sec

Related benchmarks:

DOMParser vs Template element (version: 1)

Testing

Comparing performance of: DOMParser vs Template element

Created: one year ago by: Guest

Jump to the latest result

DOMParser

Template element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A