如何优化此 HTML 以在浏览器中更快地呈现？答案

【问题标题】：How can I optimise this HTML to render faster in the browser?如何优化此 HTML 以在浏览器中更快地呈现？
【发布时间】：2011-03-10 06:12:01
【问题描述】：

我继承了一个为大量项目列表生成 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 选择器绑定处理程序。还有其他方法可以加快速度吗？还是你认为我需要一些分页。

【问题讨论】：

是分页还是对列表的其余部分进行某种动态获取，以使初始加载看起来更快？也可以考虑使用 jQuery 客户端模板来生成所有这些 HTML 客户端（尽管我无法想象使用 JS 生成这么多 HTML 会比直接渲染它更快）。

标签： javascript html optimization

【解决方案1】：

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

事件委托 (http://davidwalsh.name/event-delegate)。这将允许您为每种事件类型注册一个侦听器。
'table-layout:fixed'关于表格的样式 (http://www.w3schools.com/css/pr_tab_table-layout.asp)。这可以大大提高巨型表的渲染时间。

【讨论】：

【解决方案2】：

分页将获得最佳性能。
将内联 CSS 移至外部 - 为什么要为每一行下载该部分？
将事件处理程序移至外部 - 再次节省一些字节。

【讨论】：

分页或一些花哨的渐进式加载:)

【解决方案3】：

使用SlickGrid - 它专为处理大型数据集而设计。我已经将它与数十万条记录一起使用。 SlickGrid 通过只为您实际查看的行渲染 DOM 元素来实现这种性能水平。当您向下滚动时，旧行会随着新行的创建而被销毁，因此在给定时间您实际上不会在 DOM 中拥有超过最小数量的元素。 Demos here.

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

2500 行很多。您可能需要考虑分页选项来简化此操作，并仅限制页面上的 DOM 数量。有些人认为分页很粗糙，但实现起来相对容易。

另一种选择是编写自定义表格 js 代码，该代码仅呈现当前查看的内容，以及两侧的缓冲区。不过这很复杂。

第三种选择是使用第三方网格。这就是我会做的。

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

【讨论】：

【解决方案6】：

虽然 2500 项确实很多，但我认为这不足以导致浏览器崩溃（尤其是在 Firefox 中）。

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

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

最终，对您来说最好的解决方案是：

引入分页或；
引入“永无止境的滚动”类型功能（例如，像 Google 阅读器那样）

【讨论】：

【解决方案7】：

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

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

【讨论】：