title: Fastest way to dynamically update the style of millions of DOM elements
body: <p>I've built Conway's Game of Life in the browser just using the DOM. Nothing speical, it's been done before. My goal is to optimize it as best as I can. My actual Game of Life code works fine, and is fast enough for my liking. The bottleneck occurs in updating the screen state. With hundreds of thousands or millions of DOM elements on the screen, you can imagine that this can be quite slow (although faster than I first thought). My question is:</p>
  
  <p><strong>Working with upwards of a million DOM elements on the screen at a time, what is the fastest way to iterate through a list of DOM elements and individually change their style?</strong></p>
  
  <p>I'm using a class to keep track of styles, would it be better to dynamically change their <code>style</code> instead of <code>class</code>? I'm keeping all these elements in a multidimensional array, would it be better to iterate through another way (the loop itself is not a bottleneck, there are many such loops in my code that run fast enough for me)? I don't really know anything about "reflows" or how the browser renders things when elements change. Could these ideas be leveraged in a way that increases performance?</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>var updateUI = function () {
      for (var i = 0; i &lt; width; i++) {
          var row = grid[i];
          var rowUI = gridUI[i];
          for (var j = 0; j &lt; height; j++) {
              rowUI[j].className = "b" + row[j];
          }
      }
  }
  </code></pre>
  
  <p>with the class style being:</p>
  
  <pre><code>.b1 {
      background: #000;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WE5jQ/" rel="noreferrer">http://jsfiddle.net/WE5jQ/</a></p>