Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DOM Size matters
(version: 0)
Comparing performance of:
find single element vs find multiple elements
Created:
6 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div><div class="product-box mhl mvl ptxs"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price tml text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> </body> </html>
Tests:
find single element
var lastProduct = document.querySelector('.last-product');
find multiple elements
var lastProduct = document.querySelector('.product-box');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
find single element
find multiple elements
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):
The provided code snippet represents a series of HTML elements structured as product boxes. Each box contains an image, name, subline, price, and a primary button. You've also included benchmark test cases focusing on using `document.querySelector` to find either a single element (`.last-product`) or multiple elements (`.product-box`). The results show that "finding multiple elements" is significantly faster than finding a single element in this context. Let me know if you have any specific questions about the code, benchmarks, or anything else related to this snippet!
Related benchmarks:
dom size matters single element
asdgasdg
asdgasdgasd
Template, InnerHTML, concat
Comments
Confirm delete:
Do you really want to delete benchmark?