Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Arffrom
(version: 0)
Comparing performance of:
liveArr vs liveArrFrom vs statArrFrom
Created:
6 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div> <ul> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> </ul> </div> <script> function toArray(collection) { var result = [], i = -1; while (result[++i] = collection[i]) {}; result.length--; return result; } const liveList = document.getElementsByTagName('a'); const statList = document.querySelectorAll('a'); const liveArr = toArray(liveList); const liveArrFrom = Array.from(liveList); const statArrFrom = Array.from(statList); </script>
Tests:
liveArr
for (var i = 0, length = liveArr.length; i < length; i++) { liveArr[i].nodeName; }
liveArrFrom
for (var i = 0, length = liveArrFrom.length; i < length; i++) { liveArrFrom[i].nodeName; }
statArrFrom
for (var i = 0, length = statArrFrom.length; i < length; i++) { statArrFrom[i].nodeName; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
liveArr
liveArrFrom
statArrFrom
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
gemma2:9b
, generated one year ago):
This benchmark on MeasureThat.net is testing different ways to convert HTML anchor elements (`<a>`) into an array in JavaScript. Let's break down the options and their performance: **Options Compared:** * **`liveArr`:** This uses a `for` loop and the `toArray()` function, which iterates through the live node list obtained using `document.getElementsByTagName('a')`. Live node lists update dynamically as the DOM changes. * **`liveArrFrom`:** This leverages `Array.from()`, a built-in method introduced in ES6. It directly creates an array from the live node list (`document.getElementsByTagName('a')`). This is generally considered more concise and efficient than manual iteration. * **`statArrFrom`:** Similar to `liveArrFrom`, but uses the statically selected node list obtained with `querySelectorAll('a')`. Static node lists are snapshots of the DOM at the time they were created and don't update. **Pros & Cons:** | Method | Pros | Cons | |--------------|----------------------------------------------------|-----------------------------------------------| | `toArray()` | Potential for fine-tuning (e.g., custom logic) | Can be less efficient than built-in methods | | `Array.from()`| Concise, efficient, widely supported | Doesn't offer the same level of customization as manual iteration | **Considerations:** * **Performance Impact:** For small lists, the performance difference might be negligible. However, with large lists, `Array.from()` generally outperforms manual iteration. * **Dynamic vs. Static Lists:** If your application requires live updates to the list (e.g., due to user interactions or AJAX), use a live node list (`getElementsByTagName`). If the list is static, you can use a static node list for better performance. **Alternatives:** While `Array.from()` is highly recommended, other options exist: * **`slice()`:** This method can be used to extract a portion of an array-like object, but might require manual handling if you need the entire list. * **Custom Iterators:** For more complex scenarios, you could define your own custom iterators to process elements differently. **Summary:** For most cases, `Array.from()` provides a clean and efficient way to convert an HTML collection into a JavaScript array. Let me know if you have any other questions!
Related benchmarks:
lodash.each vs Object.forEach
array loop test
array loop test
lodash.each vs Object.forEach vs jQuery each
array.from.map vs array.from with map
Comments
Confirm delete:
Do you really want to delete benchmark?