如何提高将文本插入HTML元素的性能？

Question

在Firefox中,我使用以下代码将文本插入~500 DIV:

$(".divs").text("default"); // ~500 DIVs

在我的计算机上,如果DIV为空,则一直需要9 毫秒 .但是,如果DIV已经包含文本,则相同的代码始终需要18毫秒.

为什么空DIV在插入文本时要快2倍(jQuery是否需要先清空DIV)？并且,有没有办法提高替换已包含文本的DIV中的文本的性能？

注意:在IE 7中,速度差异并不那么显着.在空DIV中插入文本的速度提高了约1.5倍.

Answer 1

如果要插入文本时不需要进行转义,那么你可能想尝试以下操作:

$(".div").each(function(){
  this.innerHTML = "default";
});

当您使用该方法.text()时,jQuery会对文本进行一些处理.

我们需要注意,此方法会根据需要转义提供的字符串,以便在HTML中正确呈现.为此,它调用DOM方法.createTextNode(),该方法将特殊字符替换为其HTML实体等效项(例如<for <).

编辑 为避免.each()方法的损失,您可以尝试以下方法:

var divs = $(".divs"),
    i = 0,
    len = divs.length;
while(len--) {
  divs[len].innerHTML = "default";
}

如果这没有为您带来任何性能提升,那么它绝对是一个浏览器实现问题.至少这将排除jQuery性能问题/错误.

Answer 2

如果你想最快的解决方案为所有的浏览器使用textContent,如果支持,并退回到innerText/ innerHTML否则[ 测试 ](知道陷阱).

/**
 * Replaces text for all elements in the given array.
 * @param {Array} elems
 * @param {String} text
 */
var replaceText = (function(){
  var dummy = document.createElement("div");
  dummy.innerHTML = "text";
  var TEXT = (dummy.textContent === 'text') ? 'textContent' : 'innerText';
  return function(elems, text) {
    for (var i = elems.length; i--;) {
      elems[i][TEXT] = text;
    } 
  };
})();

比jQuery文本更快:

• IE 8上4倍
• Firefox 4b11上2.2x
• Chrome浏览器的1.3倍