update textContent VS data VS nodeValue · jsPerf - Le Hollandais Volant
samedi 15 août 2015 à 10:26Mouai .... il manque aussi le .innerHTML.
On reprend le bout de code en question :
<script>
Benchmark.prototype.setup = function() {
var div = document.createElement('div');
document.body.appendChild(div);
var text = document.createTextNode('text');
div.appendChild(text);
var counter = 0;
};
</script>
Ce qui nous donne en HTML :
<div>text</div>
Les résultats sont les suivant :
div.textContent :
div.textContent = 'text' + (counter++); // 37,210
div.firstChild.data :
div.firstChild.data = 'text' + (counter++); // 121,268
div.firstChild.nodeValue :
div.firstChild.nodeValue = 'text' + (counter++); // 122,914
text.data :
text.data = 'text' + (counter++); // 136,020
text.nodeValue :
text.nodeValue = 'text' + (counter++); // 137,752
Dans les 2 derniers test, on modifie directement la variable "text" qui est un "Child" de la div. Donc normal qui apparaissent comme plus rapide.
(Permalink)
On reprend le bout de code en question :
<script>
Benchmark.prototype.setup = function() {
var div = document.createElement('div');
document.body.appendChild(div);
var text = document.createTextNode('text');
div.appendChild(text);
var counter = 0;
};
</script>
Ce qui nous donne en HTML :
<div>text</div>
Les résultats sont les suivant :
div.textContent :
div.textContent = 'text' + (counter++); // 37,210
div.firstChild.data :
div.firstChild.data = 'text' + (counter++); // 121,268
div.firstChild.nodeValue :
div.firstChild.nodeValue = 'text' + (counter++); // 122,914
text.data :
text.data = 'text' + (counter++); // 136,020
text.nodeValue :
text.nodeValue = 'text' + (counter++); // 137,752
Dans les 2 derniers test, on modifie directement la variable "text" qui est un "Child" de la div. Donc normal qui apparaissent comme plus rapide.
(Permalink)