javascript - html页面大小问题，没有dom元素增加

Question

最近我们重新设计了一个页面，突然页面从 1MB 增加到 1.98MB。

我比较了 DOM 元素的数量，它从 1600 增加到了 2300。我从下面的命令中找到了元素的数量

document.getElementsByTagName('*').length

我们做了负载测试，发现加载时间也从 1.1 秒增加到 2 秒。这就是所有问题的原因吗？

我认为上面的行不会考虑任何内联 css 和 js，因为它们不是 DOM 元素。

请您推荐一下

Answer 1

如果不确切知道您重新设计的内容，就不可能知道是什么变化导致了增长。但即使是 1MB 的页面也相当大了。 JavaScript(尤其是 jQuery)可以改变 DOM 对象的数量...考虑一下:

$('p').append('<span>Blah</span> <span>blah</span> <span>blah</span>');

这将为页面上的每个 p 标签添加 3 个 DOM 对象(这可能很多!)，但它只向页面添加 71 个字节。 jQuery 可以类似地删除 DOM 对象。所以我认为 DOM 对象的数量并不是真正需要考虑的因素。