Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Proxy cloneNode or vanila cloneNode
(version: 0)
Comparing performance of:
Proxy cloneNode vs Vanila cloneNode
Created:
5 years ago
by:
Guest
Jump to the latest result
Tests:
Proxy cloneNode
const tags = new Proxy([ 'div', ].map(v => document.createElement(v)), { get(target, prop, receiver) { return Reflect.get(target, prop).cloneNode(); } }); let list = [], n = 0; while(true) { n++; list.push(tags[0]); if(n===100000) break; }
Vanila cloneNode
const tags = [ 'div', ].map(v => document.createElement(v)); let list = [], n = 0; while(true) { n++; list.push(tags[0].cloneNode()); if(n===100000) break; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Proxy cloneNode
Vanila cloneNode
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.1:latest
, generated one year ago):
Let's dive into the provided JSON data and explain what is being tested. **Benchmark Definition** The benchmark definition is to compare two different approaches for cloning DOM elements: using a `Proxy` object or using the vanilla `cloneNode()` method. **Individual Test Cases** 1. **"Proxy cloneNode"**: In this test case, a `Proxy` object is created with a getter that returns the cloned node when accessing an element in the array. The `while` loop creates 100,000 elements by pushing them into an array, and each iteration clones the first element using the `Proxy`. 2. **"Vanila cloneNode"**: In this test case, a vanilla `cloneNode()` method is used to clone the DOM elements directly. **Latest Benchmark Result** The latest benchmark result shows the execution speed (Executions Per Second) for both test cases on a Chrome 89 browser running on Windows: * "Vanila cloneNode" has an average execution speed of approximately **20.78 E/s**, indicating that using the `cloneNode()` method directly is faster. * "Proxy cloneNode" has an average execution speed of approximately **8.49 E/s**, showing that using a `Proxy` object with a getter to clone nodes is slower. **What are the options being compared?** The two options being compared are: 1. Using a `Proxy` object with a getter to clone DOM elements (`Proxy cloneNode`) 2. Using the vanilla `cloneNode()` method directly to clone DOM elements (`Vanila cloneNode`) **Pros and Cons of each approach:** * **"Proxy cloneNode"**: + Pros: Can be used to create a more complex logic for cloning nodes, like adding events or modifying properties. - Cons: The overhead of creating a `Proxy` object can make it slower than using the vanilla method directly. * **"Vanila cloneNode"**: + Pros: Direct and straightforward approach with minimal overhead. - Cons: May not be as flexible as using a `Proxy` object for more complex cloning logic. **Other considerations:** * The test case uses the `map()` function to create an array of DOM elements. This is a common JavaScript idiom, but it might be worth noting that this approach creates an intermediate array before pushing elements into another array. * No specific libraries or features are used in this test case, aside from the built-in `Proxy` object and `cloneNode()` method. **Other alternatives:** If you need to clone DOM elements without using a `Proxy` object or the vanilla `cloneNode()` method, other alternatives might include: 1. Using a library like Lodash's `cloneDeep()` function 2. Implementing your own cloning logic using recursion or iteration 3. Exploring new features in JavaScript (like `Array.prototype.map()` with a custom implementation)
Related benchmarks:
Proxy vs Proxy reflect vs prototype vs direct
Another Proxy Test
Nested proxy creation
Callback vs Proxy apply
Proxy target[key] vs Reflect.get vs get function (fixed)
Comments
Confirm delete:
Do you really want to delete benchmark?