predefined vs new query (v5)

Revision 5 of this benchmark created by Gaurav Vaish on

Description

see if it is quick to pre define your jquery objects in certain instances or not.

Preparation HTML

<div id="box">
  <h1>
    hello
  </h1>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
unique call
$("#box").find("h1");
$("#box").find("h1").text("go1");
$("#box").find("h1").text("go2");
$("#box").find("h1").text("go3");
ready
predefined call
var theBox = $("#box").find("h1");
theBox.text("go1");
theBox.text("go2");
theBox.text("go3");
ready
extracted function 1
var theBox = $("#box").find("h1");

function update(string) {
  theBox.text(string);
}

update("go1");
update("go2");
update("go3");
ready
extracted function 2
var theBox = $("#box").find("h1");

var update = function(string) {
  theBox.text(string);
}

update("go1");
update("go2");
update("go3");
ready
extracted function 3
var theBox = $("#box").find("h1");

function update(obj,string) {
  obj.text(string);
}

update(theBox,"go1");
update(theBox,"go2");
update(theBox,"go3");
ready
extracted function 4
var theBox = $("#box").find("h1");

var update = function(obj,string) {
  obj.text(string);
}

update(theBox,"go1");
update(theBox,"go2");
update(theBox,"go3");
ready
extracted function 5
function update(string) {
  $("#box").find("h1").text(string);
}

update("go1");
update("go2");
update("go3");
ready
extracted function 6
var theBox = $("#box").find("h1");

var update = function(obj,string) {
  obj.text(string);
}

update(theBox,"go1");
update(theBox,"go2");
update(theBox,"go3");
ready
extracted function 7 - what jquery does when no ones looking.
var theBox = document.getElementById("box").getElementsByTagName("h1")[0].childNodes[0].nodeValue;

var update = function(string) {
  theBox = string;
}

update("go1");
update("go2");
update("go3");
ready
what jquery does when no ones looking.
var theBox = document.getElementById("box").getElementsByTagName("h1")[0].childNodes[0].nodeValue;

theBox = "go1";
theBox = "go2";
theBox = "go3";
 
ready
hybrid
var theBox = $("#box").find("h1");

var update = function(obj,string) {
  obj.get(0).nodeValue = string;
}

update(theBox,"go1");
update(theBox,"go2");
update(theBox,"go3");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by richard lee on
  • Revision 2: published on
  • Revision 3: published by richard lee on
  • Revision 4: published by richard lee on
  • Revision 5: published by Gaurav Vaish on