title: Does touching the DOM trigger a reflow and repaint even if nothing changes?
body: <p>I am working on a small JavaScript template engine, and I have two possible approaches for dealing with updates to the DOM when the model changes:</p>
  
  <ol>
  <li><p>Check if the DOM update is really needed before doing it. This has the benefit of not risking unnecessary updates, but I am wasting space on keeping track of old values.</p>
  
  <pre><code>if (oldValue !== newValue) {
      element.textContent = newValue;
  }
  </code></pre></li>
  <li><p>Just do it. This is obviously simpler, but I am afraid that I will be triggering repaints and reflows for no reason.</p>
  
  <pre><code>element.textContent = newValue;
  </code></pre></li>
  </ol>
  
  <p>Note that I am also manipulating the DOM by calling <code>setAttribute</code>, <code>addClass</code> and <code>removeClass</code>, plus setting <code>style[prop] = value</code>.</p>
  
  <p>So, my question is: Are modern browsers smart enough to notice that nothing actually changed, and therefore not run reflow or repaint, if you touch the DOM without actually changing anything?</p>