How Much Does Caching Matter in JS?

Caching plays a very important role on both the client and server side. I tried to do a little test with benchmark.js, and caching proved to increase performance remarkably. In fact, the cache-less query was 98% slower than the cached query! Cache has its limitations with 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 things up!