Run results for: DOMParser vs Template element

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser: Chrome 132

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
DOMParser	54646.2 Ops/sec
Template element	72052.8 Ops/sec

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

Run results for: DOMParser vs Template element

Testing

DOMParser

Template element