DOM vs. cached list

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="//underscorejs.org/underscore-min.js">
  < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div > < div class = "section"
 data - identifier = "id" > < div class = "inner_content" > I have a lot of content inside of me! < /div>
</div >
<script>
Benchmark.prototype.setup = function() {
    var apps = [{
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, {
      id: "id"
    }, ];
};
</script>

Preparation code output