Skip to content

Instantly share code, notes, and snippets.

@rwaldron

rwaldron/hide-show-perf.html

Created August 28, 2010 22:05
Show Gist options
  • Save rwaldron/555634 to your computer and use it in GitHub Desktop.
Save rwaldron/555634 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hide-show-perf.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery hide/show speed</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function () {
var iter = 100000,
$p = $("p");
console.time('$("p").hide()/$("p").show()');
for ( var i = 0; i < iter; i++ ) {
$("p").hide();
$("p").show();
}
console.timeEnd('$("p").hide()/$("p").show()');
console.time('$("p").css({display:"none"})/$("p").css({display:""})');
for ( var i = 0 ; i < iter; i++ ) {
$("p").css({display:"none"});
$("p").css({display:""});
}
console.timeEnd('$("p").css({display:"none"})/$("p").css({display:""})');
console.time('$p.hide()/$p.show()');
for ( var i = 0; i < iter; i++ ) {
$p.hide();
$p.show();
}
console.timeEnd('$p.hide()/$p.show()');
console.time('$p.css({display:"none"})/$p.css({display:""})');
for ( var i = 0 ; i < iter; i++ ) {
$p.css({display:"none"});
$p.css({display:""});
}
console.timeEnd('$p.css({display:"none"})/$p.css({display:""})');
});
</script>
</head>
<body>
<p>boo</p>
</body>
</html>
Raw
jquery-condition.js
// Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
}
Raw
results.js
$("p").hide()/$("p").show(): 6136ms
$("p").css({display:"none"})/$("p").css({display:""}): 4617ms
// cached $("p")
$p.hide()/$p.show(): 4056ms
$p.css({display:"none"})/$p.css({display:""}): 2745ms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment