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
llama3.1:latest
, generated one year ago):
It appears that you've provided HTML code and some benchmarking results, but I'm not sure what specific question or problem you're trying to solve. If you'd like to discuss the HTML code or the benchmarking results, please provide more context or clarify what you'd like me to help with. Are you experiencing performance issues with your website? Or perhaps you're looking for suggestions on how to improve the accessibility of your product boxes? To answer your question directly: I'm ready when you are! Please provide more information about what you need help with, and I'll do my best to assist you.
Related benchmarks:
dom size matters single element
asdgasdg
asdgasdgasd
Template, InnerHTML, concat
Comments
Confirm delete:
Do you really want to delete benchmark?