detach vs DOM opetarion

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="container"></div>
 
<script>
  Benchmark.prototype.setup = function() {
    $('#container').html('');
    $('<ul><li>Test</li></ul>').appendTo('#container');
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
detach
 
(function() {
    var ul = $('ul');
    var li = $('li');
    
    li.click(function() {
        var $this = $(this);
        if ($this.hasClass('highlight'))
            $this.removeClass('highlight');
        else
            $this.addClass('highlight');
    });
    
    li.detach();
    
    for(var i = 0; i < 20; i++) {
        li.text('li ' + i).clone(true).appendTo(ul);
    }
})();
 pending…
DOM operation
 
(function() {
    var ul = $('ul');
    var li = $('li');
    
    li.click(function() {
        var $this = $(this);
        if ($this.hasClass('highlight'))
            $this.removeClass('highlight');
        else
            $this.addClass('highlight');
    });
    
    //li.detach();
    
    for(var i = 0; i < 20; i++) {
        li.text('li ' + i);//.clone(true).appendTo(ul);
    }
})();
 pending…

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

Compare results of other browsers

0 comments

Add a comment