html - 大型 HTML 元素是否会占用更多处理能力或内存？

Question

我在固定宽度的 div 中有一个大的 HTML 元素，溢出设置为隐藏，如下所示:

#container{
width:100px;
height:100px;
overflow:hidden;
}

#largebox{
width:100000px;
height:100px;
}

<div id="container">
    <div id="largebox">

    </div>
</div>

内部的 div 之所以这么大，是因为其中的内容是动态生成的，并使用 javascript 按钮滚动。如此大的 div 大小是否可能会占用更多内存或处理能力来呈现？如果我需要使用 javascript 添加大小，我会更好吗？

我来这里是因为我想不出一种方法来单独测试 HTML 呈现速度。不过，我可能忽略了 Chrome 开发者工具。它们可以用来测试吗？

Answer 1

JSfiddle for proof

结论:不，大型 HTML 元素似乎不会大量影响渲染大小或内存，但它们会导致异常。

在我的 fiddle 中，我测试了向 DOM 添加不同数量的元素，测试了操作 DOM 元素所花费的时间，并测试了进行基本数学运算(测试内存)所花费的时间。

示例输出(在 Chrome 32 中):

前三个测试使用小元素，只改变元素的数量。他们向容器元素添加 10、350 和 1,000,000 个 0 大小的元素，然后运行测试。 DOM 和内存测试显示彼此之间几乎没有差异，这意味着 DOM 中的元素数量没有影响:

1) 通过 id 从 DOM 中获取元素并编辑其内容所花费的时间。2) javascript可用的内存。

Init reg1 显示将所有数据插入容器所花费的时间，其后和每次测试结束的数字是容器高度。这些数字表明向 DOM 添加大量数据会减慢速度，但通常数据量并不大。请注意，与以这种方式加载具有如此数量的 HTML 的页面相比，加载速度会更慢。

init1 reg10: 1.000ms (index):35
0 (index):37
init reg10: 7.000ms (index):38
DOM  reg10: 34.000ms (index):48
mem  reg10: 24.000ms (index):56
0 (index):58
init1 reg350: 1.000ms (index):35
0 (index):37
init reg350: 3.000ms (index):38
DOM  reg350: 29.000ms (index):48
mem  reg350: 25.000ms (index):56
0 (index):58
init1 reg100000: 229.000ms (index):35
0 (index):37
init reg100000: 705.000ms (index):38
DOM  reg100000: 29.000ms (index):48
mem  reg100000: 24.000ms (index):56
0

前三个测试使用巨大元素(1,000,000 宽和高)，仅改变巨大元素的数量。同样，它显示了与上述测试相同的内容。 DOM 速度和内存不受元素数量或大小的影响。

除容器高度数字外，所有这些数字与早期测试基本一致。由于这个数字在 init1 结束后立即发生变化并且与结束时的数字一致，我们知道 DOM 几乎立即呈现，没有明显的延迟。但是，在最终测试中，我们超出了内存限制，它返回 -33554432 作为容器高度。这根本不会减慢速度。这就是我之前提到的古怪之处。这些数字应用于测试。我们不知道它在各种边缘情况下的表现如何，因此它应该只在必须使用的地方使用。

init1 huge10: 1.000ms (index):35
1000000 (index):37
init huge10: 2.000ms (index):38
DOM  huge10: 29.000ms (index):48
mem  huge10: 24.000ms (index):56
1000000 (index):58
init1 huge350: 1.000ms (index):35
33500000 (index):37
init huge350: 3.000ms (index):38
DOM  huge350: 29.000ms (index):48
mem  huge350: 24.000ms (index):56
33500000 (index):58
init1 huge100000: 227.000ms (index):35
-33554432 (index):37
init huge100000: 757.000ms (index):38
DOM  huge100000: 28.000ms (index):48
mem  huge100000: 24.000ms (index):56
-33554432 

不过，作为一般规则，HTML 元素的大小不会影响内存或渲染时间。