Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
CloneNode vs InnerHTML Fixed
(version: 0)
Comparing performance of:
CloneNode vs InnerHTML
Created:
3 years ago
by:
Guest
Jump to the latest result
Tests:
CloneNode
const row = '<tr><td>1</td><td>2</td></tr>'; const table = '<table><tbody>' + Array(10000).fill(row).join('') + '</tbody></table>'; const template = document.createElement('template'); template.innerHTML = table; const div = document.createElement('div'); template.content.firstChild.cloneNode(true);
InnerHTML
const row = '<tr><td>1</td><td>2</td></tr>'; const table = '<table><tbody>' + Array(10000).fill(row).join('') + '</tbody></table>'; const template = document.createElement('template'); template.innerHTML = table; const div = document.createElement('div'); div.innerHTML = table;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
CloneNode
InnerHTML
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):
Let's dive into the provided benchmark. **What is tested?** The provided benchmark tests two approaches to achieve the same result: Cloning a table row using `cloneNode` or setting its innerHTML. The test creates a template element, sets its innerHTML with a large amount of HTML content, and then clones the first child of the template element. **Options compared** Two options are being compared: 1. **CloneNode**: This approach uses the `cloneNode` method to create a deep copy of the table row. The original element is not modified, and a new one is created in its place. 2. **InnerHTML**: This approach sets the innerHTML of an existing element (in this case, a `div`) with the same HTML content as before. **Pros and Cons** ### CloneNode Pros: * Creates a deep copy of the original element, preserving all its attributes and child nodes. * Does not modify the original element. Cons: * Can be slower due to the overhead of creating a new element and copying its contents. * May require more memory allocation if the cloned element is not garbage collected immediately. ### InnerHTML Pros: * Faster, as it only updates the existing element's innerHTML without creating a new one. * Less memory-intensive, as no new elements are created. Cons: * Modifies the original element, which may be undesirable in certain scenarios. * Can lead to performance issues if the innerHTML is updated frequently or with complex content. **Library and Purpose** The `template` element is used in both test cases. A `template` element is a HTML element that can be used as a container for dynamic content. When its `innerHTML` property is set, it renders the contents of the template as HTML elements. In this case, the template's innerHTML is set to contain a large amount of HTML content, which is then cloned or used as-is. **Special JS features or syntax** None are mentioned in the provided benchmark definitions. However, using `innerHTML` can lead to security vulnerabilities if the input content is not properly sanitized, as it allows execution of JavaScript code. **Other alternatives** Alternatives to these approaches could include: * Using a library like jQuery's `.clone()` method, which creates a deep copy of an element. * Implementing custom logic for cloning elements using techniques like document fragment manipulation. * Using web worker threads to parallelize the cloning process, if available on the target browser. In summary, the benchmark compares two approaches for achieving a specific result: Cloning a table row using `cloneNode` or setting its innerHTML. Each approach has pros and cons regarding performance, memory usage, and modification of original elements.
Related benchmarks:
Add styles via cloneNode vs. createElement
customElements using Template cloneNode vs. innerHTML
innerHTML vs replaceChildren() vs removeChild()|appendChild(cloneNode())
cloneNode vs createElement
Comments
Confirm delete:
Do you really want to delete benchmark?