DOMに触れると、何も変わらなくてもリフローと再描画がトリガされますか？

Question

私は小さなJavaScriptのテンプレートエンジンに取り組んでいます、と私はモデルが変更されたときにDOMへの更新を扱うための2つの可能なアプローチがあります：DOMの更新が実際にそれを実行する前に、必要な場合

1. チェックを。これは不必要な更新を危険にさらさないという利点がありますが、私は古い値を追跡するスペースを無駄にしています。

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

2. ちょうどそれを行います。これは明らかに簡単ですが、私は何の理由もなく再塗装とリフローを引き起こすのではないかと恐れています。私もsetAttribute、addClassとremoveClassを呼び出し、プラスstyle[prop] = valueを設定することで、DOMを操作しています

   element.textContent = newValue; 
   

注意。

私の質問は、実際に何も変更せずにDOMをタッチすると、現代のブラウザは実際に変更されていないことに気付き、リフローまたは再描画を実行しないことに気付くでしょうか？

Answer 1

MutationObserver apiを使用すると、DOMの変更を検出できます。

ここでは、ブラウザが希望の内容に基づいてDom Changedイベントをトリガーするかどうかを確認するための例を示します。

ここでは、jqueryのtext('...')と、jqueryを使用しないel.textContentの両方があります。クロム55で

$(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>

• 、のみsetAttribute()とjQuery text()はDom Changeイベントをトリガしました。
• Firefox 50では、すべてがDom Changeイベントをトリガーしました。
• Edge 38では、すべてがDom Changeイベントをトリガーしました。