jQuery .remove vs. .hide vs. detach

JavaScript performance comparison

Revision 30 of this test case created by

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="remove-me">confirm removed</div>
<div id="hide-me">confirm hidden</div>
<div id="detach-me">confirm detatched</div>

<style>
.hidden
{
 dispaly: none;
}
<script>@jsPerfTagToken</script>
    

Preparation code output

<div id="remove-me">confirm removed</div> <div id="hide-me">confirm hidden</div> <div id="detach-me">confirm detatched</div> <style> .hidden { dispaly: none; }

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
.remove()
$('#remove-me').remove();
pending…
.hide()
$('#hide-me').addClass('hidden');
pending…
.detach()
pending…
style.display
pending…
.css()
pending…
.css() without lookup
pending…
style.display with jQuery
pending…
style.display without lookup
pending…

Compare results of other browsers

Revisions

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

0 Comments

confirm removed
confirm hidden
confirm detatched