Est-ce que toucher le DOM déclenche une refusion et repeindre même si rien ne change?

Question

Je travaille sur un petit moteur de template JavaScript, et j'ai deux approches possibles pour traiter les mises à jour du DOM lorsque le modèle change:

1. Vérifiez si la mise à jour DOM est vraiment nécessaire avant de le faire. Cela a l'avantage de ne pas risquer des mises à jour inutiles, mais je gaspille de l'espace sur le suivi des anciennes valeurs.

   if (oldValue !== newValue) { 
       element.textContent = newValue; 
   } 
   

2. Faites-le. C'est évidemment plus simple, mais j'ai peur de déclencher des repaints et des remboursements sans raison.

   element.textContent = newValue; 
   

Notez que je manipulais aussi les DOM en appelant setAttribute, addClass et removeClass, ainsi que la mise en style[prop] = value.

Alors, ma question est: Est-ce que les navigateurs modernes assez intelligents pour remarquer que rien réellement changé, et donc pas courir refusion ou de repeindre, si vous touchez le DOM sans changer quoi que ce soit?

Answer 1

Utilisation du MutationObserver api vous pouvez détecter DOM changements.

Voici un exemple que vous pouvez utiliser pour voir si un navigateur déclenche l'événement Dom Changed, en fonction de ce que vous voulez.

Vous avez ici à la fois un text('...') par jquery et un el.textContent (qui n'utilise pas 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>

• Dans Chrome 55, seulement setAttribute() et jQuery text() a déclenché l'événement Dom Change. Dans Firefox 50, tout a déclenché l'événement Dom Change.
• Dans Edge 38, tout a déclenché l'événement Dom Change.