The other day I was talking to one of my coworkers who asked me an interesting question. He wanted to know if there was any significant improvement, when using jQuery, to assigning a jQuery selector to a variable when you repeatedly are referencing the same object. Is there much overhead when jQuery instantiates the variable?

Neither he nor I doubted that there was some overhead, but we both wanted to have a more clear picture so I devised the following test:

<script type="text/javascript">
	var tests = 100000;
	$(document).ready(function(){
		var date1a = new Date();
		edit1();
		var date1b = new Date();
		var date2a = new Date();
		edit2();
		var date2b = new Date();
		$('#one').html(date1b-date1a + " ms");
		$('#two').html(date2b-date2a + " ms");
	});
	function edit1(){
		for(var i = 0; i < tests; i++){
			$('#one').html(i);
		}
	}
	function edit2(){
		var two = $('#two');
		for(var i = 0; i < tests; i++){
			two.html(i);
		}
	}
</script>

And:

<div id="main">This is a test page.</div>
<div id="one">Test 1</div>
<div id="two">Test 2</div>

The results were pretty consistent as follows:

     This is a test page.
     3007 ms
     2497 ms