大的html表是慢的吗？

Question

我最近一直在使用包含大量（数百）行的表来开发应用程序。这些行包含表格数据，每行包含两个下拉列表以及直接在其下方显示隐藏表格行的链接。

当我尝试从下拉列表中选择一个值以及显示隐藏的表格行时，我目前遇到了长时间的延迟。

桌子是我问题的根源吗？

Answer 1

从我收集的内容来看，如果没有明确说明宽度，HTML表格的呈现速度可能会很慢。如果不是，浏览器必须先完成加载单元格的内容才能计算出正确的宽度。

MSDN在其“here”文章中提供了一些可能有用的信息Building High Performance HTML Pages;他们建议如下（特别是关于表格）：

  

  
• 将表格布局CSS属性设置为表格中的fixed。
  
• 为每列明确定义col个对象。
  
• 在每个col上设置WIDTH属性。
  

Answer 2

问题很可能是渲染控件（100个选择框）而不是表格布局。下拉列表中有多少项？它是否在不同操作系统的所有浏览器中执行相同的操作？

很抱歉这么模糊，但通常表格渲染速度不慢，但由于缺乏可访问性而被低估（尽管当然很多理想主义是屏幕读者不喜欢它们。） / p>

Answer 3

我可以从经验中说，几乎可以肯定的是下拉列表导致了缓慢。具有数百行的表几乎可以即时呈现，如果它们仅包含文本，但只需几十个选项就可以为每行添加下拉列表，现在甚至50行将花费相当多的时间。

尝试设计表格行中下拉列表的需求 - 如果这是一个表单（为什么还有下拉列表？），让用户选择他们想要编辑的行，然后只放置可编辑的控件在那一行，无论是通过AJAX，如果你是那种东西，还是更传统的“细节视图”方法。

Answer 4

在显示带有几千个条目的静态表时，我没有注意到任何减速，但添加排序或动态斑马条纹等效果可能会使快速计算机上的现代浏览器快速陷入困境。确保您没有在整个表格中运行任何JavaScript迭代。

Answer 5

无论你想出什么，在几个平台上使用一些较慢的机器在几个浏览器中测试该方法。除了用于Macintosh的Safari之外，我曾经有一个应用程序在任何地方都很快。事实证明这是它提供下拉菜单的方式。实验无可替代。嗯，我的意思是测试。

Answer 6

如果您知道每列应该有多宽，请尝试在表中为CSS指定table-layout: fixed，看看是否有任何区别（它应该阻止浏览器尝试重新渲染整个表，因为您已经在几行上切换了可见性。）

Answer 7

IE根本无法处理非常大的DOM操作。

如果你在每一行和一个链接中有两个选择，让我们假设每个选择有5个选项（（（5options + 1select）* 2）+ 1个链接+ 3tds + 1tr）每个至少17个DOM项目行。另外，如果我没有弄错，即将每个文本项视为自己的DOM节点。因此，为下拉文本添加另外10个DOM节点，为链接添加1个DOM节点，即每行28个DOM项目。

Answer 8

我同意其他人的观点，不仅是你的桌子造成了缓慢加载，而且还有下拉列表的人口。

如果有帮助，您可以尝试对表格进行分页。您可以使用jQuery或extjs等JavaScript框架进行分页和AJAX。