How caching matters in JS?

Caching plays a very important role, may it be on the client side or on the server side.

I tired to do a tittle benchmark test with benchmark.js and caching proved to benefit the performance remarkably.

To state the numbers, cache less query was 98% slower than the cached query!

It's Agreeable, that cache has it's on limitations on live objects, but it's worth a timely cache update in that case.

Below is the simple test code and some numbers from the test :

<div id="docs">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
  Benchmark.prototype.setup = function() {
    var divs = document.querySelectorAll('div#docs')
    var cache = {get: {'divs': divs}};
  };
</script>

Test code :

document.querySelectorAll('div#docs').length
 
cache.get.divs.length;

Results :

document.querSelectorAll('div#docs').length => 135,809 (ops) 98% slower.

cache cache.get.divs.length => 8,212,190 (ops) 0.99% faster.

Do let me know, if you find a better way of speeding up things!

Share this