Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 824
Anders Avatar asked Jan 03 '17 22:01

Anders


People also ask

What causes reflow and repaint?

Repaint occurs when some changes which only its skin styles, such as color and visibility. Reflow occur when the page of DOM changes its layout.

What triggers reflow?

Resizing the browser window, using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element's classes are a few of the things that can trigger reflow.

What does DOM reflow occur?

Reflow occurs when you: insert, remove or update an element in the DOM. modify content on the page, e.g. the text in an input box. move a DOM element.

What is difference between reflow and repaint?

Repaint differs from reflow as reflow involves changes that affect layout of an element, repaint occurs when changes are made to an elements skin, but do not affect its layout like setting outline, visibility, background or color property of an element.


1 Answers

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.
like image 77
Dekel Avatar answered Oct 09 '22 03:10

Dekel