使用超过 500 行的表时 IE 速度变慢答案

【问题标题】：IE slowdown when using a table with 500+ rows使用超过 500 行的表时 IE 速度变慢
【发布时间】：2011-05-25 05:02:07
【问题描述】：

你们有什么技巧可以让 500 多行的大表格在 Internet Explorer 中显示得更快吗？

这就是我现在的做法：

MySQL 查询的结果返回 500+ 行，所以我使用了一个带有以下内容的 while 循环来显示所有行：

echo "<tr class='someMainClass' bgcolor='".$someBgColor."'>";
echo    "<td width='10px' style='display: none;' class='someClass'>String</td>";
echo    "<td class='someClassAgain andOtherClass' title='someTitle' >String again</td>";
echo    "<td width='100px' class='ClassAgain' id='>another string</td>";
echo    "<td width='100px' class='ClassAgain' title='title'><input type='text' value='and i input'/></td>";
echo "</tr>";

列表完成后，IE 会冻结几秒钟，然后列表就会出现。除此之外，<tr> 上的任何悬停效果都非常缓慢。

我不确定为什么在 IE 中会出现这种慢动作，因为所有其他浏览器都可以正常工作。

任何帮助将不胜感激。

【问题讨论】：

IE 很糟糕，这可能是导致您的问题的原因。
是的，你说的很对
你在用 500 多行来做什么，这使得这是一个 jQuery 标记的问题？是否有要显示的 jQuery 脚本？另外：哪个版本的 IE？
更严重的是，我在 IE 中所做的几乎所有动画（即使它不是 500 行）充其量都是跳动的
无论如何，您可能应该使用分页，我真的想不出有人想要在一页上显示 500 个结果的任何情况。

标签： php jquery html css internet-explorer

【解决方案1】：

请记住，大多数 IE 用户并没有意识到他们的体验不佳，他们已经习惯了。

最好的方法可能是实现分页，无论是服务器端还是通过 javascript。

【讨论】：

【解决方案2】：

不幸的是，这将是 IE 的问题...您最好以某种方式优雅地降级 IE。也许只显示前 50 行并实现分页。

【讨论】：

是的，分页可能会解决问题，但在这种情况下，我不能这样做。将使用此注释编辑帖子。泰

【解决方案3】：

将数据保存在 javascript 对象中，加载前 20 行（或者无论多少行占用页面），等待 document.ready，然后开始使用 javascript 插入其余行。您甚至可以在页面滚动时插入行。

为了让它在这样一个垃圾浏览器中看起来不错，需要做很多工作。

【讨论】：

JavaScript 在 IE 中甚至更慢。如果您使用 JavaScript 填充表格，它可能会比静态 HTML 慢。特别是如果您以“正确的方式”填充它，使用 document.createElement() 而不是字符串。

【解决方案4】：

无论您使用什么浏览器，在一个页面上呈现 500 行都是一个坏主意，尽管与 IE 相比，它在 Safari、Firefox 和 Chrome 中的效果可能更好。从可用性的角度来看，它也很糟糕。

因此，更好的方法可能是重新考虑解决方案并引入分页。也许每页 50 行？或者其他的东西。

【讨论】：

是的，我有一些其他列表只有 100 行，IE 渲染非常好，但谁会使用列表，将无法更改页面（分页），因为同样需要总是查看所有行

【解决方案5】：

尝试限制标记。删除所有宽度、样式、id 等属性，然后在加载 HTML 后编写一个脚本来填充这些属性。废弃样式和宽度，使用类。删除多余的空格。

【讨论】：

【解决方案6】：

您可以将其隐含在滚动浏览 ajax 时仅显示您需要的内容，例如this tut，甚至this tut。

但 IE 真的很糟糕。对于一个简单的小浏览器来说，拥有这么多的 HTML 实在是太多了……除非它当然不是垃圾。

【讨论】：

【解决方案7】：

众所周知，在某些情况下，非锚元素上的 :hover 伪选择器会使 IE7 和 IE8 变慢*。当不使用严格的文档类型时，IE7 和 IE8 将忽略 :hover 在锚点以外的任何元素上。当使用严格的文档类型时，:hover 在非锚点上可能会导致性能下降。

Source

【讨论】：

【解决方案8】：

尝试在您的 CSS 中使用 table-layout: fixed：

使用这种（快速）算法，表格的水平布局不依赖于单元格的内容；它仅取决于表格的宽度、列的宽度以及边框或单元格间距。

这应该会加快初始渲染速度，但您必须手动管理列大小。表列大小通常需要对表进行全面扫描，如果没有足够的空间来容纳所有列的自然宽度，则需要进行一些协商；使用固定布局通过立即静态设置宽度然后使所有单元格符合它们是否喜欢它来避免扫描和协商。

【讨论】：