speedtest

value of caching jQuery elements

by John Allan

HTML

<div class="asd">
<div class="dfsa">
<div class="fdsaf">
<div class="asd">
<div class="dfsa">
<div class="fdsaf">
<div class="fdsaf">
<div class="fdsa">
<div class="fdsa">
<div class="thisOne">
testtest
    </div>
    </div>
    </div>
    </div>
    </div>
</div>
</div>
    </div>
</div>
</div>

JavaScript

function slow() {
    var i, l, s, sd, ed;

    i = 0;
    l = 1000;
    s = '<p>add this string</p>';

    sd = new Date();
    
    for (i = 0; i < l; i++) {
        $('.thisOne').html(s);
    }
    
    ed = new Date();
    
    console.log('slow time = ' + (ed.getTime() - sd.getTime()));
}

function fast() {
    var i, l, el, s, sd, ed;

    i = 0;
    l = 1000;
    s = '<p>add this string</p>';
    el = $('.thisOne');
        
    sd = new Date();
    
    for (i = 0; i < l; i++) {
        el.html(s);
    }
    
    ed = new Date();
    
    console.log('fast time = ' + (ed.getTime() - sd.getTime()));
}

slow();
fast();