dlaczego zastępując InnerHTML z innerText powoduje> 15X spadek wydajności

Question

powstaje pytanie to z mojego poprzedniego postu why a tiny reordering of DOM Read/Write operations causes a huge performance difference.

rozważyć następujący kod:

function clearHTML(divs) { 
    Array.prototype.forEach.call(divs, function (div) { 
     contents.push(div.innerHTML); 
     div.innerHTML = ""; 
    }); 
} 

function clearText(divs) { 
    Array.prototype.forEach.call(divs, function (div) { 
     contents.push(div.innerText); //innerText in place of innerHTML 
     div.innerHTML = ""; 
    }); 
} 

http://jsfiddle.net/pindexis/ZZrYK/

wyniki mojego testu dla n = 100:
ClearHTML: ~ 1ms
czystym tekście: ~ 15ms

dla n = 1000:
ClearHTML: ~ 4ms
czystym tekście: ~ 1000ms

Przetestowałem kod na Google Chrome i IE i uzyskać podobne rezultaty (Firefox nie obsługuje innerText).

Edit: różnica między tymi dwoma funkcjami nie jest spowodowany przez powolność funkcji innerText porównaniu do innerHTML, to na pewno (próbowałem usunięcie div.innerHTML ="" i dostał zastrzyk wydajności), nie jest dziwne reflow przeglądarka odbywają się tutaj .

Answer 1

Jak MDN explains:

Jak innerText jest świadomy CSS stylizacji, będzie wyzwalać reflow, natomiast textContent nie będzie.

Używanie textContent zamiast innerText nie powoduje ponownego przepływu i jest również szybkie. IE9 + obsługuje również to, co robi FFX/Chrome.

Answer 2

Różnica prawie na pewno pochodzi z dodatkowego wysiłku potrzebnego do uzyskania innerText (co wierzę usuwa zbędne tagi i po prostu zwraca tekst wewnątrz elementu). InnerHTML z drugiej strony po prostu zwraca dane, które zostały już przeanalizowane i zrozumiane przez przeglądarkę.