Question

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

编辑：将使用Mootools，因此无需担心创建部分。将使用通常的。这就是我要做的事情

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

告诉我最好创建哪些新元素？

Answer 1

我会考虑一个表或div。但是，如果您要显示巨大数据量，我建议您可能需要使用可滚动网格（或表）以及分页进行调查。您的用户可能不会喜欢手动遍历页面上垂直渲染的大量数据。

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

Answer 2

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

例如，.innerHTML是迄今为止最快的方式，但有一些小问题。

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

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

<强>更新

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

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

Answer 3

正如@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);

Answer 4

这是非常依赖浏览器的，可能是错误的问题通常，加载数据和解析JSON对象所需的时间比显示HTML要长很多。

Answer 5

如果你希望能够以任何你想要的方式CSS，那么我的猜测是span。

最轻的DOM对象

5 个答案: