Does touching the DOM trigger a reflow and repaint even if nothing changes?

Question

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:

  1. 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.

    if (oldValue !== newValue) {
        element.textContent = newValue;
    }
    
  2. Just do it. This is obviously simpler, but I am afraid that I will be triggering repaints and reflows for no reason.

    element.textContent = newValue;
    

Note that I am also manipulating the DOM by calling setAttribute, addClass and removeClass, plus setting style[prop] = value.

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?


Show source
| javascript   | dom   | performance   | html   | reflow   2017-01-03 23:01 1 Answers

Answers to Does touching the DOM trigger a reflow and repaint even if nothing changes? ( 1 )

  1. 2017-01-03 23:01

    Using the MutationObserver api you can detect DOM changes.

    Here is an example you can use to see if a browser triggers the Dom Changed event, based on what you want.

    You have here both a text('...') by jquery and an el.textContent (that doesn't use jquery).

    $(document).ready(function() {
      $('#btn1').click(function() {
        console.log('text changed - jquery');
        $('#a1').text('text 1');
      });
      $('#btn2').click(function() {
        console.log('text changed - textContent');
        $('#a1')[0].textContent  = $('#a1')[0].textContent 
      });
      $('#btn3').click(function() {
        console.log('class changed');
        $('#a1').attr('class', 'cls' + Math.floor(Math.random() * 10));
      });
    });
    
    
    var target = $('#a1')[0];
    
    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
      var changed = false;
      mutations.forEach(function(mutation) {
        // You can check the actual changes here
      });
      console.log('Dom Changed');
    });
    
    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true };
    
    // pass in the target node, as well as the observer options
    observer.observe(target, config);
    .cls1 {
      border: 1px solid red;
    }
    .cls2 {
      border: 1px solid pink;
    }
    .cls3 {
      border: 1px solid cyan;
    }
    .cls4 {
      border: 1px solid darkgreen;
    }
    .cls5 {
      border: 1px solid orange;
    }
    .cls6 {
      border: 1px solid darkred;
    }
    .cls7 {
      border: 1px solid black;
    }
    .cls8 {
      border: 1px solid yellow;
    }
    .cls9 {
      border: 1px solid blue;
    }
    .cls10 {
      border: 1px solid green;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="a1" class="cls1">text 1</div>
    <button id="btn1">Change text - jquery (keep original)</button><br />
    <button id="btn2">Change text - textContent (keep original)</button><br />
    <button id="btn3">Change class (real change)</button>

    • In Chrome 55, only setAttribute() and jQuery text() triggered the Dom Change event.
    • In Firefox 50, everything triggered the Dom Change event.
    • In Edge 38, everything triggered the Dom Change event.

Leave a reply to - Does touching the DOM trigger a reflow and repaint even if nothing changes?

◀ Go back