将数百个DOM元素动态插入页面同时保持高性能的最佳方法

Question

我有一个Web应用程序,我们将在DOM中插入数百个元素

基本上,我在做

 $('#some_element').html('<lots of html here>'); 

反复.在某些情况下,我可能需要这样做$('#some_element').appendTo('more html');

根据以前的经验,使用append插入html文本或设置innerHTML元素的速度很慢.

我听说你可以通过首先将元素放在DOM片段中然后将其位置移动到所需元素内来提高性能.

这一点的关键是关键.你们有什么关于最大化性能的提示或建议吗？我可以做些什么来加快速度？

编辑:如评论中所述:该应用程序涉及各种数据的实时流,因此它需要能够不断添加新的DOM元素来表示新数据.(这也可能导致另一个问题,即DOM元素太多,因此需要太旧的元素).

Answer 1

只是不要反复做html()(或使用它的本土堂兄innerHTML = …).将HTML打包在一个变量中,只做一次(或尽可能少).例如:html()

var buf = [], i = 0;

buf[i++] = "<p>";               /* or use buf.push(string) */
buf[i++] = "some text";
buf[i++] = "some other text";
buf[i++] = "</p>";

element.innerHTML = buf.join("");

另请参阅innerHTML上的Quirksmode条目和W3C DOM与innerHTML页面.

更新:昨天我发现了一篇很棒的文章当 Steven Levithan的innerHTML不够快,关于他的功能replaceHtml,这比使用just更快innerHTML,因为它在使用之前 删除了使用标准DOM操作替换的DOM节点innerHTML:

function replaceHtml(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // Pure innerHTML is slightly faster in IE
        oldEl.innerHTML = html;
        return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    newEl.innerHTML = html;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    /* Since we just removed the old element from the DOM, return a reference
    to the new element, which can be used to restore variable references. */
    return newEl;
};