最轻的 DOM 对象答案

【问题标题】：Lightest DOM Object最轻的 DOM 对象
【发布时间】：2011-01-02 02:57:58
【问题描述】：

想知道哪个是最轻的 HTML 元素。拥有大量 JSON 数据，我必须以适当的可读格式显示这些数据，因此要循环遍历数据并创建动态元素。哪个是 HTML 中最轻的元素，最轻的，因为它占用的内存最少，并且很容易被浏览器等渲染。

编辑：将使用 Mootools，所以不用担心创建部分。会照常使用。这就是我要做的事情

objJson.each(function(j, jCounter)
{
     var elm = new Element('', {'html' : j.value}).injectInside($(document.body));
});

告诉我什么新元素最适合创建？？

【问题讨论】：

标签： javascript html performance dom

【解决方案1】：

我会考虑使用表格或 div。但是，如果您有大量数据要显示，我建议您可能希望使用可滚动网格（或表格）和分页进行调查。您的用户可能不喜欢手动遍历页面上垂直呈现的大量数据。

几个 JS 库提供了不错的（可滚动和可分页）解决方案。

【讨论】：

【解决方案2】：

正如@Kobi 所提到的，与实际解析大型 json 字符串并循环遍历它相比，附加元素所占用的资源要少得多。

如果你想编写高效的代码，不要对每个新元素都使用 .append()，而是构造一个字符串然后附加它。大致如下：

var newElements;

for(i=0; i<objects.length; ++i) {
  newElements += "<div>" + objects[i].name + "</div>"
}

$("#container").append(newElements);

我使用带有单个文本条目的 div 作为示例。它可以是具有任意数量值的任何元素。如果您在每个 json 对象中有多个项目，您可以通过执行以下操作来提高上述代码的效率：

var object;
var newElements;
var objectCount = objects.length;

for(i=0; i<objectCount; ++i) {
  object = objects[i];
  newElements += "<div>" + object.name + ", " + object.size + ", " + object.color + "</div>"
}

$("#container").append(newElements);

【讨论】：

【解决方案3】：

这是您不应该担心的事情。相反，您应该担心如何创建这些动态元素。

例如，.innerHTML 是迄今为止最快的方式，但存在一些故障。

如果你想使用纯 document.createElement('span') 方式，你可以通过第一次创建跨度来尝试它，然后你可以使用 .cloneNode(true) 来克隆它而不是每次都创建它（框架这样做，并且有一个很好的您可以获得的速度）。

在任何情况下，您都应该使用像 jQuery 这样的框架并使用其适当的方法来创建动态元素，它们是为提高速度而实现的最先进技术。

更新

我认为没有人知道哪个是最好的元素。它是特定于浏览器的，使用 div 或 span 之间的区别是如此次要，您不必担心。

由于您似乎没有使用任何表格，而只是使用单个元素，因此我建议使用 innerHTML。

【讨论】：

JQuery 不是为速度而生的，它是为实用而生的。可以通过 (1) 在发布脚本之前将 JQueries 直接静态编译为它们的无抽象 javascript 等效项（例如 $('#x') 到 document.getElementById('x')），或 (2) 动态编译查询来提高速度到字符串，例如 $('#x') 编译为 "document.getElementById(\"x\")" 可以有效地多次评估。 JQuery 主要是为了生产力，而不是性能。

【解决方案4】：

这非常依赖于浏览器，并且可能是错误的问题。
通常，加载数据和解析 JSON 对象会比显示 HTML 花费更长的时间。

【讨论】：

【解决方案5】：

我的猜测是span，如果您希望能够以任何您想要的方式对其进行 CSS。

【讨论】：