jQuery Selector Benchmark
JavaScript performance comparison
Info
You can select children on a DOM in so many ways. This test breaks down selecting children in a list with use of a context, no context, and child selectors.
Preparation code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="page1" data-type="page">
<div class="titlebar"><h1>SOME SETTINGS</h1></div>
<div class="content with_footbar scrollable_y">
<form class="usetheme">
<label>Choose a nickname<input type="text" /></label>
<label>Choose a location<input type="text" /></label>
<label>Choose a range<input type="range" min=0 max=2 /></label>
<table class="scale">
<tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
</table>
<label>Select Gender</label>
<table class="leftscale">
</div>
</div>
<div id="page2" data-type="page">
<div class="titlebar"><h1>SOME SETTINGS</h1></div>
<div class="content with_footbar scrollable_y">
<form class="usetheme">
<label>Choose a nickname<input type="text" /></label>
<label>Choose a location<input type="text" /></label>
<label>Choose a range<input type="range" min=0 max=2 /></label>
<table class="scale">
<tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
</table>
<label>Select Gender</label>
<table class="leftscale">
</div>
</div>
<div id="page3" data-type="page">
<div class="titlebar"><h1>SOME SETTINGS</h1></div>
<div class="content with_footbar scrollable_y">
<form class="usetheme">
<label>Choose a nickname<input type="text" /></label>
<label>Choose a location<input type="text" /></label>
<label>Choose a range<input type="range" min=0 max=2 /></label>
<table class="scale">
<tr><td>1 KM</td><td>2 KM</td><td>5 KM</td></tr>
</table>
<label>Select Gender</label>
<table class="leftscale">
</div>
</div>
<script>
Benchmark.prototype.setup = function() {
//Save The Context
var parentContext = document.getElementById('parent');
};
</script>