Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
show/hide vs for from root
(version: 0)
Comparing performance of:
hide/show vs for
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> .hidden { display: none; } </style> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div id="single"> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">single</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="single-input1" class="input-group"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">single</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="single-input2" class="input-group"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">single</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="single-input3" class="input-group"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">single</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="single-input4" class="input-group"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div id="multiple"> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">label</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="test-1-input-1" class="input-group input1"> <input class="form-control " value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-1-input-2" class="input-group input2 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-1-input-3" class="input-group input3 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="text-grey">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">label</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="test-2-input-1" class="input-group input1"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-2-input-2" class="input-group input2 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-2-input-3" class="input-group input3 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="text-grey">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">label</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="test-3-input-1" class="input-group input1"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-3-input-2" class="input-group input2 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-3-input-3" class="input-group input3 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="text-grey">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">label</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div id="test-4-input-1" class="input-group input1"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-4-input-2" class="input-group input2 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> <div id="test-4-input-3" class="input-group input3 hidden"> <input class="form-control" value="4"> <div class="input-group-addon"> <span class="">aze</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="text-grey">%</span> </div> <div class="input-group-addon"> <i class="">lock</i> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> <div class="form-group is-empty"> <label class="col-sm-3 col-xs-3 ">a</label> <div class=" col-sm-9 col-xs-9"> <div class="row"> <div class="col-xs-5"> <div class="input-group"> <input class="form-control" value="5"> <div class="input-group-addon"> <span class="extra"></span> </div> <div class="input-group-addon"> <i class=""></i> </div> </div> <div class="col-xs-3"> <div class="input-group"> <input class="form-control" value="3" disabled> <div class="input-group-addon"> <span class="">%</span> </div> <div class="input-group-addon"> <i class="">p</i> </div> </div> </div> </div> </div> </div> </div> </div>
Script Preparation code:
var list = ["single-input1","single-input2","single-input3","single-input4"]; var values = [1,2,3,4];
Tests:
hide/show
$(".input1").addClass("hidden"); $(".input3").removeClass("hidden");
for
for(var i=0, len=list.length; i<len; i++) { var item = list[i]; var container = $("#" + item); container.find("input").val(values[i]); container.find(".extra").text("abc"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
hide/show
for
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 appears that the provided code is a template for a web page, specifically a HTML form with input fields and labels. The code includes various classes and IDs for styling purposes, such as `form-control`, `input-group`, `col-sm-3`, and `col-xs-9`. There are also two test cases listed at the bottom of the code snippet: 1. "hide/show" 2. "for" These test cases seem to be related to benchmarking or performance testing, where the goal is to compare the execution time of different scenarios. The latest benchmark result shows that Chrome 92 on a Windows desktop executed both tests with the following metrics: * "hide/show": 112840.1015625 executions per second * "for": 61671.44140625 executions per second Overall, it seems that this code is intended to be used as a starting point for building a web application or form, and that the test cases are related to performance optimization or benchmarking.
Related benchmarks:
jQuery :visible vs Javascript : find visible element
visibility vs display
JQuery: hidden selector vs hidden attribute v2
show/hide vs for
Comments
Confirm delete:
Do you really want to delete benchmark?