最近我在开发一个应用程序,使用了包含大量(数百)行的表格。这些行包含表格数据,每一行都包含两个下拉列表以及一个链接,该链接直接显示其下隐藏的表格行。
目前我在尝试从下拉列表中选择值以及显示隐藏的表格行时遇到了长时间的延迟。
这里的问题源自于表格吗?
最近我在开发一个应用程序,使用了包含大量(数百)行的表格。这些行包含表格数据,每一行都包含两个下拉列表以及一个链接,该链接直接显示其下隐藏的表格行。
目前我在尝试从下拉列表中选择值以及显示隐藏的表格行时遇到了长时间的延迟。
这里的问题源自于表格吗?
- 在表格上将table-layout CSS属性设置为
fixed
。- 为每个列显式定义
col
对象。- 在每个
col
上设置WIDTH属性。
问题很可能是控件的渲染(100个下拉框)而不是表格布局。下拉列表中有多少项?它在不同操作系统上的所有浏览器中是否执行相同的方式?
很抱歉这么笼统,但通常表格的渲染不会很慢,但因为缺乏可访问性而受到贬低(尽管当然很多理想主义是屏幕阅读器不喜欢它们的事实)。
我在显示几千个条目的静态表格时没有注意到任何减速,但是添加排序或动态斑马线等效果可能会迅速拖慢甚至在快速计算机上也会使现代浏览器变慢。确保您不会在整个表格上运行任何JavaScript迭代。
如果您知道每列的宽度应该是多少,请尝试在表格的CSS中指定table-layout: fixed
,看看是否有所不同(这将防止浏览器仅因为您切换了几行的可见性而尝试重新呈现整个表格。)
IE在处理非常大的DOM操作方面表现得并不好。
假设每行都有两个选择框和一个链接,并且每个选择框有5个选项,那么每行至少有17个DOM元素(((5个选项+1个选择框)*2)+1个链接+3个tds+1个tr)。另外,如果我没记错的话,IE会将每个文本项都视为自己的DOM节点。所以每行还需要额外添加10个DOM节点用来显示下拉选项的文本,再加上1个用于链接的DOM节点,这样每行就有28个DOM元素。
我同意其他人的看法,不仅是您的表格导致了加载缓慢,下拉列表的填充也是原因之一。
如果有帮助的话,您可以尝试对表格进行分页。您可以使用JavaScript框架,例如jQuery或extjs进行分页和AJAX。