caching vs non-caching

JavaScript performance comparison

Test case created by *andy

Info

Searching the break-even point of 'caching vs non-caching'

Preparation code

<div id="abra" class="abra">
        <div id="cada" class="cada"></div>
        <div id="bra" class="bra"><p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, sapiente, beatae, veniam repellat eaque fugiat tempore quae aperiam dolore doloremque earum dignissimos recusandae rerum. Voluptate recusandae quos voluptatem maxime quae.</span><span>Ratione, eius tempora alias ipsam architecto debitis magnam rerum officia quisquam fugiat quia amet culpa blanditiis eum cum quis nobis nisi. Necessitatibus, culpa aut cum omnis nostrum consectetur tempore vel.</span></p></div>
        <div id="sim" class="sim"></div>
        <div id="sala" class="sala">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, officiis, consequuntur vero error excepturi quo inventore ratione dolorum rem reprehenderit provident doloribus temporibus aperiam molestiae atque eum odit repellendus et!</p>
        </div>
        <div id="bim" class="bim"></div>
</div>

Preparation code output

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, sapiente, beatae, veniam repellat eaque fugiat tempore quae aperiam dolore doloremque earum dignissimos recusandae rerum. Voluptate recusandae quos voluptatem maxime quae.Ratione, eius tempora alias ipsam architecto debitis magnam rerum officia quisquam fugiat quia amet culpa blanditiis eum cum quis nobis nisi. Necessitatibus, culpa aut cum omnis nostrum consectetur tempore vel.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, officiis, consequuntur vero error excepturi quo inventore ratione dolorum rem reprehenderit provident doloribus temporibus aperiam molestiae atque eum odit repellendus et!

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
El1 with getById
document.getElementById('bra').classList.add('foo');
 
pending…
El1 caching
var bra = document.getElementById('bra');
bra.classList.add('foo');
 
pending…
El 2
document.getElementById('bra').classList.add('foo');
document.getElementById('bra').classList.add('bar');
 
pending…
El2 caching
var bra = document.getElementById('bra');
bra.classList.add('foo');
bra.classList.add('bar');
 
pending…
El3
document.getElementById('bra').classList.add('foo');
document.getElementById('bra').classList.add('bar');
document.getElementById('bra').classList.add('baz');
 
pending…
El3 caching
var bra = document.getElementById('bra');
bra.classList.add('foo');
bra.classList.add('bar');
bra.classList.add('baz');
 
pending…
El1 with getByClass
document.getElementsByClassName('bra')[0].classList.add('foo');
pending…
El1 caching
var bra = document.getElementsByClassName('bra')[0];
bra.classList.add('foo');
pending…
El 2
document.getElementsByClassName('bra')[0].classList.add('foo');
document.getElementsByClassName('bra')[0].classList.add('bar');
pending…
El2 caching
var bra = document.getElementsByClassName('bra')[0];
bra.classList.add('foo');
bra.classList.add('bar');
pending…
El3
document.getElementsByClassName('bra')[0].classList.add('foo');
document.getElementsByClassName('bra')[0].classList.add('bar');
document.getElementsByClassName('bra')[0].classList.add('baz');
pending…
El3 caching
var bra = document.getElementsByClassName('bra')[0];
bra.classList.add('foo');
bra.classList.add('bar');
bra.classList.add('baz');
pending…
El3 caching classList
var braCL = document.getElementsByClassName('bra')[0].classList;
braCL.add('foo');
braCL.add('bar');
braCL.add('baz');
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