浏览器能够显示的HTML元素数量是否有限制？

Question

我有一个巨大的表格，随着用户向下滚动（自动预加载接下来的行），表格会变得越来越大。在某个时候，浏览器变得缓慢，当我点击或尝试滚动时，它开始暂停一会儿，且随着行数的增加变得更加缓慢。我想知道页面可以容纳多少元素，是否有任何限制？或者可能只是我的JavaScript代码有泄漏（尽管我只有一个事件处理程序，附加到表格的tbody上-以及解析冒泡mousedown事件的脚本）。

更新：在加载了一千行后延迟变得显著。滚动速度本身还是相当可接受的，但是例如通过单个附加在tbody上的事件处理程序高亮显示所选行非常痛苦（需要至少2-3秒钟，而且延迟随着行数的增加而增加）。我在所有浏览器上都遇到了延迟。不仅仅是我，几乎每个访问该页面的人都有这个问题，因此我认为它在某种程度上影响了每个平台。

更新：我在这里提供了一个简单的示例：http://client.infinity-8.me/table.php?num=1000（您可以将任何数字传递给num），它基本上渲染了一个带有num行的表格，并且只有一个事件处理程序附加到父表中。我应该从这个例子中得出结论，实际上并没有明显的性能下降，是由于子元素的数量引起的。因此，可能是其他地方有泄漏:(

- jayarjo

---

请提供您的代码/网址以获取完整答案（没有这些，一切都只是猜测）。 - gblazex

好的，我无法发布原始页面的链接，因为它不是公开的。我会想出一些示例页面。 - jayarjo

我不同意在IE中没有明显的性能下降。如果您将其设置为1，然后重置为2000，则在表格开始呈现之前会有2-3秒的延迟（因为如下面我的答案所述，IE在呈现整个表格之前等待加载它）。 - scunliffe

Answer 1

另外一个需要考虑的是表格尺寸。如果你使用 table-width:auto; 来设置表格样式，浏览器需要测量表格中每个元素来确定其大小。这可能会变得非常缓慢。

相反地，选择一个固定的宽度或者至少使用 table-width:fixed 来设置表格样式。

- Dave Markle

---

+1 为协助最小化 OP 经历的任何限制或延迟而提供帮助，但不要提及 CPU、RAM 或浏览器。 :) - Russell

感谢您的有趣观察，这种情况是否有任何测量或基准测试？我的表格具有固定宽度，在所有浏览器中都观察到了这种延迟增加，特别是在IE7/8和FF（关闭FireBug时）中更为明显。至于CPU-我不确定如何衡量它，您是否有关于此主题的有价值资源链接？ - jayarjo

Answer 2

我认为标准中没有定义限制。虽然我想象这个限制可能是数十亿个元素，但每个浏览器实现中都可能有一个硬编码的限制。另一个限制是可寻址内存的数量。

为解决您的问题：除了在向下滚动时自动加载元素外，您还可以自动卸载已经滚动到屏幕上方的元素。然后，即使滚动了很多次，您的程序仍将保持快速。

您还可以考虑使用分页等替代界面。

- Mark Byers

---

我猜卸载是个选择（至少不需要大改写就能解决问题）。但我想确切地知道发生了什么，以便将来能够记在心里。也许这是其他问题的话题，对于这个问题，我想找出单个页面中元素数量是否有任何限制。以便能够大致估计可能的边界。 - jayarjo

Answer 3

如果每个表格行都有JS，那么旧的电脑将无法处理。对于HTML本身，您不必太担心。

您应该担心普通人不喜欢大型表格，这就是分页的用途。使用分页进行分隔以提高可用性和其他问题。

想象一本没有页面而只有一页的书，你会喜欢阅读吗？即使您的眼睛（在我们的情况下是计算机）可以处理它。

- eugeneK

Answer 4

我认为没有限制。然而，HTML文件越长，你的计算机就需要更多的资源。但是表格必须非常大才行...

- JochenJung

Answer 5

限制实际上由用户代理和客户端机器决定。HTML与XML一样，是一种树形数据格式。因此，元素越多，客户端浏览器就需要搜索更深的树来呈现页面。

我曾经遇到过一个问题，将超过100个表格添加到一个div中（作为IE6无法动态创建表格元素的旧解决方法）。

- Russell

---

IE6无法动态创建表格元素的问题是什么？我知道有两个问题：第一个是如果你使用.appendChild()创建，你需要确保你有/添加了一个tbody，如果你想添加TR行。第二个是你不能使用innerHTML，例如TableElem.innerHTML = '<tr><td>....</td></tr>';这是因为Eric Vasilik的14年老bug在IE中存在的缘故：http://www.ericvasilik.com/2006/07/code-karma.html - scunliffe

IE6不允许我使用document.createElement("table")，我认为是因为有tbody元素的原因。这是很久以前的事情了（我们不会喝9年的牛奶 :P）。 - Russell

Answer 6

你用的是什么浏览器？有些浏览器比其他浏览器更好地处理事情 - 例如，如果你使用IE，它运行缓慢我不会感到惊讶 - 它不能像基于Webkit的浏览器一样很好地处理JavaScript事件。

另一件事显然是你的计算机（RAM和CPU）。但说实话，除非我们谈论10000+行，否则大多数计算机都不应该有问题...即使是那样...

你能发布一些代码吗？

- xil3

Answer 7

考虑到存在众多浏览器和渲染引擎，它们都具有不同的性能特征，并且这些引擎在性能方面不断得到改进，而计算机硬件也在不断加快：因此，浏览器可以处理的上限没有固定值。但是，对于特定版本的浏览器和特定硬件，存在当前的上限。

如果您没有更多地定义您的硬件和浏览器，那么很难帮助您。此外，如果您不发布代码，任何人都无法就您的Javascript的可能性能提出建议。即使只是一个事件处理程序，如果它无限循环或者为每个元素调用，它都会显著减慢渲染过程。

- Janick Bernet

Answer 8

暂且不考虑RAM或CPU使用情况，预加载后文件的实际大小是多少？

如果你的表确实很大，那么你可能会强制用户下载几兆字节的数据 - 我发现有些机器在下载2-4MB的数据后往往会挂起。

- Damien Dennehy

---

它动态加载数据，通常不应该有任何限制（因为我没有意识到任何约束，我认为如果有任何限制，它们将超过数百万或数十亿）。现在，在加载1或2千行后，出现了明显的卡顿。 - jayarjo

Answer 9

这要看情况。例如，IE不会在加载所有内容之前开始渲染表格。因此，如果您有一个包含5,000行的表格，它需要在渲染任何内容之前加载所有5,000行数据，而其他浏览器则会在获取部分数据后开始渲染，并在表格增长时进行一些调整（如果需要）。

一般来说，节点数量越多，渲染速度就越慢，节点复杂性也是如此... 避免嵌套表格，如果可能的话，尝试将大型表格分成块... 例如，每100行（如果可能）。

- scunliffe

---

我相信IE和其他所有浏览器一样，如果您在HTML中指定了列宽，则会在下载期间呈现表格。如果没有指定宽度，浏览器必须下载整个表格以便能够计算宽度。 - PauliL

不正确。您可以通过创建一个表格（例如20行），指定任何所需的宽度，并在表格的td标签中的随机位置插入一个script标签，其中包含一个alert('in row X');来查看IE的行为。在IE中，您将在表格的任何部分渲染之前收到所有警报。而如果您在Firefox、Chrome、Safari或Opera中加载此页面，则会同时获得表格呈现的警报。 - scunliffe

Answer 10

世界上真的没有理由在单个页面上发布整个巨大数据集。如果要求是向用户提供所有这些数据，则应将其导出到可以被某些比浏览器更好的软件读取的文件中。

相反，我建议您制作一个AJAX驱动的页面，在该页面上让用户查看部分数据，如果他们需要查看更多，则只需下载该数据集的那一部分并替换页面上当前的数据集。这就是分页。Google搜索是此类网站的绝佳示例。

- Gert Grenander