jQuery object caching

JavaScript performance comparison

Revision 3 of this test case created by Chen-Pang He

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul id="test-list"></ul>
<script>
Benchmark.prototype.setup = function() {
    var $testList = $('#test-list');
   
    function helloWorld() {
      var res = document.createElement('li');
      res.appendChild(document.createTextNode('Hello world!'));
      return res;
    }
};

Benchmark.prototype.teardown = function() {
    $testList.empty();
};
</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
    CSS selector
    $('#test-list').append(helloWorld());
    pending…
    getElementById
    $(document.getElementById('test-list')).append(helloWorld());
    pending…
    Object caching
    $testList.append(helloWorld());
    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. Here’s a list of current revisions for this page:

    0 comments

    Add a comment