Question

我继承了一个为大量项目生成html的应用程序。大约有2500个项目按类别分组，因此创建了一个巨大的2500+行表。以下是为单行呈现的代码：

  <tr id='ev_2075_321' class='datagridRow1'>
      <td align='left'>
        <div style='margin-left: 20px;'>
          <table cellspacing='0' cellpadding='0' style=
          'cursor: pointer; width: 100%;'>
            <tr>
              <td style='width: 10px;'>
                <img src='images/RewardsGreen.gif'>
              </td>
              <td valign='middle' align='left' style='cursor: default;'
              ondblclick='doNothing;' onclick=
              'listOnClick(5,"WHI.E_2075");'
              onmouseover=
              'highlightListItem("ev_2075_321", true); showInfoBubble(5,"WHI.E_2075","ev_2075_321","ev_cond_eventsContainer");'
              onmouseout=
              'highlightListItem("ev_2075_321", false, 1); hideInfoBubble();'>
              <span style='margin-left: 3px;'>Card Registration</span>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>

您认为如果我将此缩减为具有背景图像的单个列表项，渲染时间会改善吗？目前它只是在Firefox和IE中崩溃。我评论了事件处理程序，只看到了大约30％的速度，我正在考虑使它们基于类，并通过jQuery选择器绑定处理程序。还有其他方法可以加快速度吗？或者您认为我需要一些分页。

Answer 1

如果分页不是一个选项，你应该尝试：

活动代表团（http://davidwalsh.name/event-delegate）。这将允许您为每种事件类型注册一个侦听器。
'table-layout：fixed'在表的样式上（http://www.w3schools.com/css/pr_tab_table-layout.asp）。这可以大大改善巨型表的渲染时间。

Answer 2

分页会看到最佳表现。
将内联CSS移动到外部 - 为什么要为每一行下载该部分？
将事件处理程序移动到外部 - 再次保存一些字节。

Answer 3

使用SlickGrid - 它专门用于处理大型数据集。我已经将它用于成千上万的记录编号。 SlickGrid通过仅为您实际查看的行呈现DOM元素来实现此级别的性能。向下滚动时，旧行会在创建新行时被销毁，因此在给定时间内，DOM实际上不会有超过最少数量的元素。 Demos here.

（警告：如果你将事件处理程序绑定到网格中的元素，请小心.Slick绕过jQuery并自行设置innerHTML，这将泄漏通过jQuery绑定的任何处理程序。）

从UX的角度来看，我更喜欢SlickGrid的方法（虚拟滚动）。我讨厌处理分页数据。

Answer 4

你最好的选择是引入分页。您的页面加载时间将减少，因为一次拥有总数据的1/20（假设每页100个项目）。您的内容的可读性也将大大提高。

Answer 5

2500行很多。您可能需要考虑一个分页选项来简化此操作，并且只是限制页面上的DOM数量。有些人认为分页原油，但实施相对容易。

另一种选择是编写一个自定义表js代码，它只呈现当前查看的内容，以及任何一方的缓冲区。但这非常复杂。

第三种选择是使用第三方网格。多数民众赞成我会做的事。

请记住，浏览器非常擅长innerHTML替换。因此，如果您单独追加2500行，则可以通过批量编写内部html操作来加快速度。

Answer 6

虽然2500项确实很多，但我认为这不足以保证浏览器崩溃（特别是在Firefox中）。

尝试以下优化（正如我上面的其他人所指出的那样）：

减少HTML标记的数量
内联事件处理程序通常更快（根据我的经验）而不是与jQuery绑定。在任何情况下，取出它们并创建一个计时器来为您绑定事件（计时器在一个单独的线程上运行到UI）。如果你想要更加棘手，你甚至可以创建分页，只有当用户在页面之间滚动时才绑定点击处理程序。
抛弃内联图片。这些将总是导致页面加载较慢。 CSS类更快。

最终，最适合您的解决方案是：

介绍分页或;
介绍“永无止境的滚动”类型功能（例如Google阅读器的功能）

Answer 7

分页的替代方法是延迟加载或按需加载。只需加载表格的一小部分，当用户滚动到页面底部时，加载另一个小部分，依此类推。

此外，摆脱你的内联属性，如valign / align / style，并将所有内容卸载到外部CSS中。

如何优化此HTML以在浏览器中更快地渲染？

7 个答案: