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

时间:2011-03-09 00:25:11

标签: javascript html optimization

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

7 个答案:

答案 0 :(得分:4)

如果分页不是一个选项,你应该尝试:

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

答案 1 :(得分:3)

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

答案 2 :(得分:2)

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

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

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

答案 3 :(得分:1)

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

答案 4 :(得分:1)

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

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

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

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

答案 5 :(得分:1)

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

尝试以下优化(正如我上面的其他人所指出的那样):

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

最终,最适合您的解决方案是:

  1. 介绍分页或;
  2. 介绍“永无止境的滚动”类型功能(例如Google阅读器的功能)

答案 6 :(得分:1)

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

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