Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
dom size matters single element
(version: 0)
Comparing performance of:
framework vs no framework
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="bootstrap-wrapper"> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> <div class="product-box mhl mvl pts last-product"> <div class="image phl mtn"></div> <div class="name mtl"></div> <div class="subline mtl"></div> <div class="price mtl text-danger"></div> <button class="btn-block btn-primary mtl"></button> </div> </div> <div class="no-framework-wrapper"> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> <div class="product-box last-product"> <div class="image"></div> <div class="name"></div> <div class="subline"></div> <div class="price"></div> <button></button> </div> </div> </body> </html>
Tests:
framework
var wrapper = document.querySelector('.bootstrap-wrapper'); var lastProduct = wrapper.querySelector('.last-product');
no framework
var wrapper = document.querySelector('.no-framework-wrapper'); var lastProduct = wrapper.querySelector('.last-product');
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
framework
no framework
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):
It seems like you're trying to parse some HTML and benchmarking data, but without the actual code or further context, it's difficult for me to provide a specific answer. However, I can suggest a possible approach based on what you've shared: 1. Extract the HTML structure: Identify the repeating pattern in the HTML, specifically the `product-box` elements with their respective attributes. 2. Use JavaScript to parse and manipulate the HTML: Utilize libraries like Cheerio or DOMParser to parse the HTML string into a document object. 3. Extract relevant data: Loop through each `product-box` element and extract the necessary data, such as the product name, price, and image URL. 4. Compare benchmark results: Use the extracted data to compare the performance of your application with different frameworks or no framework at all. If you'd like to provide more context or clarify what specific aspects of this HTML and benchmarking data you need help with, I'll do my best to assist you!
Related benchmarks:
DOM Size matters
asdgasdg
asdgasdgasd
querySelectorAll data attribute vs class name 10-20-21
Comments
Confirm delete:
Do you really want to delete benchmark?