在JavaScript中创建大型静态DOM元素的最佳方法？

Question

我有许多JS小部件经常需要创建并添加到DOM的元素。他们永远不会改变。

因此一种选择是将HTML本身作为字符串存储在JS中，并使用JQuery从该字符串创建元素，然后将其附加到文档中：

var elements = "<div><table><tr><td>1</td><td>2</td></tr></table></div>";
function create() {
  return $(elements);
}
$("body").append(create());

另一个选择是编写一个函数，该函数将多次使用document.createElement（“ div”）或$（“

”）来构建元素，在需要时将它们彼此附加，然后附加到文档中：

function create() {
  return $("<div>").append($("<table>")......
}
$("body").append(create());

在第一种情况下，我有一个很大的JS字符串，实际上是HTML。在第二种情况下，我有一块笨拙的JS，它实际上代表HTML。

是否有（一种）缺点（另一种？有没有我没有想到的更好的解决方案？

我有许多JS小部件经常需要创建并添加到DOM的元素。他们永远不会改变。因此，一种选择是将HTML本身作为字符串存储在JS中，并使用JQuery创建...

Answer 1

注意：如果您讨厌阅读，只需查看下面的摘要以得到最终答案

也许您真的不需要借助jQuery创建它们。

如果该html的结构很复杂（因此使用document.createElement方法将是一个过大的杀伤力），我将使用innerHTML属性。

// somewhere in your code, preferably outside of global scope
var div = document.createElement('div')
div.id = 'mycustomdiv'
document.getElementsByTagName('body')[0].appendChild(div);
// assuming elements contains string of html with your elements
div.innerHTML = elements;

这样，您避免了（再次假设）在jQuery对象中创建和包装元素的不必要的开销。

---

更新：测试自己最快的方法是什么http://jsperf.com/creating-complex-elements。此测试确认，当您尝试压缩性能的最后一点时，请还原为原始javascript和经典DOM操作。

---

更新2。要调查为什么Firefox 10上的innerHTML方法与将完整字符串传递给jQuery.append相比有如此糟糕的结果，我看了一下jQuery源。

事实证明（在jQuery 1.7.1中，他们正在使用另一种通过利用document.createDocumentFragment创建dom元素的方式（当然，对于没有适当支持的浏览器也会有一些缺点）。

DocumentFragments是DOM节点。它们永远不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有子元素替换。

由于文档片段在内存中，而不是主DOM树的一部分，因此将子代添加到其中不会导致页面重排。

假设createDocumentFragment可用，就脚本的整体跨浏览器性能而言，这是最好的方法。

所以，总结一下：

我立场正确。 [如果在创建新的DOM元素时要在不同浏览器中寻求最佳性能，请关注文档片段（如果您不想自己处理各种极端情况，请使用jQuery）。]] >>

[有关documentFragment的更多阅读，请在John Resig博客http://ejohn.org/blog/dom-documentfragments/上查看此帖子

详细介绍了在JS中创建DOM的三种常见方法和最佳方法。

我将提供3种方法来创建大型DOM及其优点和缺点，当然，这是创建大型DOM的最优化方法，以及为什么。最重要的是在js中创建DOM时，本机JS和DOM方法是您的朋友，除非没有其他方法（不太可能），否则请不要使用Jquery。

用于比较的测试数据：

创建5列的400行并附加到DOM。testData是从后端以json形式获取的对象列表，用于创建表。

针对不同浏览器的附加执行时间测试结果快照HTML

<div id="employeeListContainer1"></div>
<table id="employeeList2">
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Title</th>
        <th>ID</th>
        <th>Department</th>
    </tr>
</thead>
第一种方式：字符串连接

（就整个浏览器而言，最优化方式）

var tableElementContainer1 = document.getElementById("employeeListContainer1"),
    temptableHolder  = '<table><thead><tr><th>First Name</th><th>Last Name</th><th>Title</th><th>ID</th><th>Department</th></tr></thead><tbody>';
        for(var i=0,len=testData.length; i<len; i++){
                temptableHolder  += '<tr><td>' + testData[i].firstName + '</td><td>' + testData[i].lastName + '</td><td>' + testData[i].title
                        + '</td><td>' + testData[i].id + '</td><td>'  + testData[i].department +  '</td></tr>';
            }
    temptableHolder += '</tbody></table>';
    tableElementContainer1.innerHTML  = temptableHolder ;

优点：-跨Firefox / Chrome / IE / Safari （跨浏览器3至5毫秒）的最快执行时间。通过Performance.now（）和console.time（）API进行衡量。

缺点：-当列数更多并且您需要设置很多属性时，使用字符串会变得很困难，并且主要的保留时间也会减少。

第二种方式：Native Js document.createElement（）

（这是跨浏览器性能的第二好的方法）

var tableBody = document.createElement('tbody'),
tableElement2 = document.getElementById("employeeList2"),  
    for(var i=0,len=testData.length; i<len; i++){
            tableRow = document.createElement("tr");
            for(var k in testData[i]){
                rowCell = document.createElement("td");
                rowCell.appendChild(document.createTextNode(testData[i][k]));
                tableRow.appendChild(rowCell);
            }
            tableBody.appendChild(tableRow);
        }
tableElement2.appendChild(tableBody);
优点：-跨Firefox / Chrome / Safari （跨浏览器5至12毫秒）的第二快的执行时间。通过Performance.now（）和console.time（）API进行衡量。-比第一种方法更具可持续性]
缺点：-在IE浏览器中，执行时间更多，90+毫秒

第三种方式：使用Jquery创建DOM

（我的建议是不要使用它）

var tableBody = $('<tbody></tbody>'),
  tableElement2 = document.getElementById("employeeList2"),  
        for(var i=0,len=testData.length; i<len; i++){
            tableRow = $("<tr></tr>");
            for(var k in testData[i]){
                rowCell = $("<td></td>");
                rowCell.append(testData[i][k]);
                tableRow.append(rowCell);
            }
            tableBody.append(tableRow);
        }
tableElement2.append(tableBody);
优点：-易于在元素上添加属性/类/样式，易于阅读且易于维护。
缺点：-所有浏览器的执行时间最差（（220 ms至330 ms）
，最慢的数字在IE

中

您可以尝试对静态HTML块进行AJAX提取，而不是将其存储在页面本身中。它也使您可以灵活选择将来要插入的块。

或者（这只是一个随机的想法，并不是很充实），您可以将“结构”存储为JSON数据，然后动态解析它。可能类似于{"div": {"div": {"span": "Text here"}}}的<div><div><span>Text here</span></div></div>。我仍然会选择AJAX。 ：）

[如果您正在寻找性能，我会坚持使用第一个版本，因为在第二个版本中，每次您调用$('<div>')或$('<table>')时，您都在创建一个新的jQuery对象，然后调用.append()，这也是另一个方法调用您做。我会选择第一个。

您已经回答了自己。

编辑：删除了错误的样本。

或者还有另一种选择，您可以像这样将HTML放到隐藏div内的当前html中：

<div id="hiddenContainer" style="display:none;">
    <div><table><tr><td>1</td><td>2</td></tr></table></div>
</div>
然后在jquery中，您可以阅读它：
var elements = $("#hiddenContainer").html()
 
您可以尝试为此目的专门编写的library。您可以使用对象文字创建DOM元素。

Answer 2

详细介绍了在JS中创建DOM的三种常见方法和最佳方法。

Answer 3

您可以尝试对静态HTML块进行AJAX提取，而不是将其存储在页面本身中。它也使您可以灵活选择将来要插入的块。

或者（这只是一个随机的想法，并不是很充实），您可以将“结构”存储为JSON数据，然后动态解析它。可能类似于{"div": {"div": {"span": "Text here"}}}的<div><div><span>Text here</span></div></div>。我仍然会选择AJAX。 ：）

Answer 4

[如果您正在寻找性能，我会坚持使用第一个版本，因为在第二个版本中，每次您调用$('<div>')或$('<table>')时，您都在创建一个新的jQuery对象，然后调用.append()，这也是另一个方法调用您做。我会选择第一个。

Answer 5

您已经回答了自己。

编辑：删除了错误的样本。

Answer 6

您可以尝试为此目的专门编写的library。您可以使用对象文字创建DOM元素。