Почему замена InnerHTML на innerText вызывает> 15X падение производительности

Question

этот вопрос возникает из моего предыдущего сообщения why a tiny reordering of DOM Read/Write operations causes a huge performance difference.

рассмотрим следующий код:

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/

Мои результаты испытаний при п = 100:
ClearHTML: ~ 1мс
ClearText: ~ 15мс

для n = 1000:
ClearHTML: ~ 4ms
ClearText: ~ 1000мс

Я тестировал код на Google Chrome и IE и получить аналогичные результаты (Firefox не поддерживает InnerText).

Edit: разница между этими двумя функциями не является причиной медлительности функции InnerText по сравнению с innerHTML, это точно (я попытался удалить div.innerHTML ="" и получил прирост в производительности), есть странный браузер оплавление происходит здесь ,

Answer 1

Как MDN explains:

Как InnerText знает CSS стиля, это вызовет оплавление, тогда TextContent не будет.

Использование textContent вместо innerText не вызывает переплавку и также быстро. IE9 + также поддерживает его, как и FFX/Chrome.

Answer 2

Разница почти наверняка связана с дополнительными усилиями, необходимыми для получения InnerText (который, я считаю, удаляет посторонние теги и просто возвращает текст внутри элемента). InnerHTML, с другой стороны, просто возвращает данные, которые уже были проанализированы и поняты браузером.