最近我在开发一个应用程序，使用了包含大量（数百）行的表格。这些行包含表格数据，每一行都包含两个下拉列表以及一个链接，该链接直接显示其下隐藏的表格行。
目前我在尝试从下拉列表中选择值以及显示隐藏的表格行时遇到了长时间的延迟。
这里的问题源自于表格吗？
大型HTML表格会影响速度吗？
5
- ErnieStings
3
每个下拉列表中有多少项？这些列表在每一行中是否重复？ - Bob Kaufman
你使用哪个浏览器（HTML查看器）是否重要？ - ChrisW
根据@ErnieStrings的评论，我在我的答案中添加了asp.net标签。@ErnieStrings - 我今天不在，所以明天会给你一个示例。与此同时，请查看<asp：gridview...一旦您熟悉了它，我的示例和其他遇到的示例将更加清晰易懂。 - Bob Kaufman
8个回答
13
据我所知，如果HTML表格中没有明确指定宽度，它们可能会显示缓慢。如果没有指定宽度，浏览器必须在计算正确的宽度之前加载单元格的内容。
MSDN在其"构建高性能HTML页面"文章中提供了一些信息此处，可以帮助解决问题;他们建议特别关注以下内容（有关表格）：
MSDN在其"构建高性能HTML页面"文章中提供了一些信息此处，可以帮助解决问题;他们建议特别关注以下内容（有关表格）：
- 在表格上将table-layout CSS属性设置为
fixed。- 为每个列显式定义
col对象。- 在每个
col上设置WIDTH属性。
- Donut
1
1非常感谢您提供的源代码。是否有任何实际的基准测试可以清楚地看到差异？ - Adriano
5
问题很可能是控件的渲染（100个下拉框）而不是表格布局。下拉列表中有多少项？它在不同操作系统上的所有浏览器中是否执行相同的方式？
很抱歉这么笼统，但通常表格的渲染不会很慢，但因为缺乏可访问性而受到贬低（尽管当然很多理想主义是屏幕阅读器不喜欢它们的事实）。
- Chris S
1
我同意“控件渲染”是问题所在。也许应该重新考虑数百行的显示方式？另一种选择是基于 AJAX 的“按需加载”行？只是一个想法，少滚动=用户更愉快。 - Jakub
3
我可以从经验中指出，几乎肯定是下拉列表导致速度变慢。如果只包含文本的表格可以几乎瞬间渲染出来，但是每行添加一个只有几十个选项的下拉列表，现在即使50行也需要花费可观的时间。
尝试在表格行周围设计，避免需要使用下拉列表 - 如果这是一个表格（否则你为什么会需要下拉列表？），让用户选择他们想要编辑的行，然后只在该行放置可编辑控件，无论是通过AJAX（如果你喜欢这种方式）还是更传统的“详细视图”方法。
尝试在表格行周围设计，避免需要使用下拉列表 - 如果这是一个表格（否则你为什么会需要下拉列表？），让用户选择他们想要编辑的行，然后只在该行放置可编辑控件，无论是通过AJAX（如果你喜欢这种方式）还是更传统的“详细视图”方法。
- Martha
1
我在显示几千个条目的静态表格时没有注意到任何减速，但是添加排序或动态斑马线等效果可能会迅速拖慢甚至在快速计算机上也会使现代浏览器变慢。确保您不会在整个表格上运行任何JavaScript迭代。
- John Millikin
1
无论你想到什么，都要在几个浏览器和几个平台上进行测试，包括一些较慢的机器。我曾经有一个应用程序，在除了 Macintosh 上的 Safari 之外的所有地方都很快。后来发现是下拉菜单的渲染方式有问题。没有什么比实验更好的了。哦，我的意思是测试。
- slothbear
0
如果您知道每列的宽度应该是多少，请尝试在表格的CSS中指定table-layout: fixed，看看是否有所不同（这将防止浏览器仅因为您切换了几行的可见性而尝试重新呈现整个表格。）
- searlea
0
IE在处理非常大的DOM操作方面表现得并不好。
假设每行都有两个选择框和一个链接，并且每个选择框有5个选项，那么每行至少有17个DOM元素（（（5个选项+1个选择框）*2）+1个链接+3个tds+1个tr）。另外，如果我没记错的话，IE会将每个文本项都视为自己的DOM节点。所以每行还需要额外添加10个DOM节点用来显示下拉选项的文本，再加上1个用于链接的DOM节点，这样每行就有28个DOM元素。
- CaffGeek
0
我同意其他人的看法，不仅是您的表格导致了加载缓慢，下拉列表的填充也是原因之一。
如果有帮助的话，您可以尝试对表格进行分页。您可以使用JavaScript框架，例如jQuery或extjs进行分页和AJAX。
- bob_santos
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接