jquery：最快的DOM插入？

StackOverflow https://stackoverflow.com/questions/117665

  •  02-07-2019
  •  | 
  •  

题

我对如何插入大量HTML感觉不好。 让我们假设我们得到了：

var html="<table>..<a-lot-of-other-tags />..</table>"

我希望将其纳入

$("#mydiv")

之前我做过像

这样的事情

var html_obj = $(html); $("#mydiv").append(html_obj);

jQuery解析html创建DOM对象是否正确？那么这就是我在某处读到的内容（更新：我的意思是我已阅读，jQuery解析html手工创建整个DOM树 - 它的废话对吧？！） ，所以我改变了我的代码：

$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);

感觉更快，是吗？这是否正确，这相当于：

document.getElementById("mydiv").innerHTML += html？或者是jquery在后台做了一些额外的昂贵的东西？

也愿意学习其他选择。

有帮助吗？

解决方案

innerHTML速度非常快，在很多情况下，只要设置它就会得到最好的结果（我只会使用追加）。

但是，如果已经在<！>中有很多内容，那么mydiv <！>然后你强迫浏览器再次解析和渲染所有内容（之前的所有内容，以及所有新内容）。你可以通过在<！>上添加文档片段来避免这种情况.mydiv <！> QUOT;代替：

var frag = document.createDocumentFragment();
frag.innerHTML = html;
$("#mydiv").append(frag);

这样，只会解析您的新内容（不可避免），而现有内容则不会。

编辑：我的错......我发现innerHTML在文档片段上得不到很好的支持。您可以对任何节点类型使用相同的技术。对于您的示例，您可以创建根表节点并将innerHTML插入到：

中 
var frag = document.createElement('table');
frag.innerHTML = tableInnerHtml;
$("#mydiv").append(frag);

其他提示

尝试以下方法：

$("#mydiv").append(html);

其他答案，包括已接受的答案，慢 2-10x ： jsperf 。

接受的答案在 IE 6,7和8 中不起作用，因为IE中的错误导致您无法设置innerHTML <table>元素： jsbin 。

你想避免什么？ <！>“感觉不好<！>”非常模糊。如果你听说过<！>，那么DOM很慢<！>并决定<！>“避免DOM <！>”，然后这是不可能的。将代码插入到页面中的每种方法（包括innerHTML）都将导致创建DOM对象。 DOM是浏览器内存中文档的表示。您想要创建DOM对象。

人们说<！>“DOM之所以这么慢<！>是因为使用document.createElement()创建元素，这是用于创建元素的官方DOM接口，比在某些浏览器中使用非标准innerHTML属性要慢。这并不意味着创建DOM对象很糟糕，创建DOM对象必需，否则您的代码根本不会做任何事情。

关于使用DOM片段的答案是正确的。如果您有一堆html对象，您不断插入DOM，那么您将看到使用该片段的一些速度改进。 John Resig的这篇文章解释得非常好： http://ejohn.org/blog/dom-documentfragments/

追加项目的最快方式

附加到DOM树的最快方法是将所有追加缓冲到单个DOM片段，然后将dom片段附加到dom。

这是我在游戏引擎中使用的方法。

//Returns a new Buffer object
function Buffer() {

    //the framgment
    var domFragment = document.createDocumentFragment();

    //Adds a node to the dom fragment
    function add(node) {
        domFragment.appendChild(node);
    }

    //Flushes the buffer to a node
    function flush(targetNode) {

        //if the target node is not given then use the body
        var targetNode = targetNode || document.body;

        //append the domFragment to the target
        targetNode.appendChild(domFragment);

    }

    //return the buffer
    return {
        "add": add,
        "flush": flush
    }
}


//to make a buffer do this
var buffer = Buffer();

//to add elements to the buffer do the following
buffer.add(someNode1);

//continue to add elements to the buffer
buffer.add(someNode2);
buffer.add(someNode3);
buffer.add(someNode4);
buffer.add(someN...);

//when you are done adding nodes flush the nodes to the containing div in the dom
buffer.flush(myContainerNode);

使用此对象，我可以在屏幕上渲染约1000个项目〜在firefox 4中每秒40次。

这是一个用例。

对于初学者，编写一个脚本，计算每种方法执行100或1,000次所需的时间。

为了确保重复不会以某种方式被优化掉 - 我不是JavaScript引擎的专家 - 每次都会更改你插入的html，比如把'0001'然后'0002'然后'0003'在桌子的某个单元格中。

我创建一个巨大的字符串，然后用jquery附加这个字符串。 对我来说，工作得很好，也很快。

你提到对替代品感兴趣。如果你看一下与DOM相关的jQuery插件的列表，你会发现几个致力于以编程方式生成DOM树。例如，请参阅 SuperFlyDom 或 DOM Elements Creator ;但还有其他人。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top