performance - 渲染 8000 多个项目时如何优化 Mustache 渲染速度？

Question

我正在尝试渲染表格，因此模板非常简单；行模板如下所示:

  <script type=\"text/mustache\" id=\"template-list-records\">
  {{#.}}
   <tr>
    <td>{{airport_code}}</td>
    <td>{{city_code}}</td>
    <td class=\"pull-right\">
     [<a href=\"result.mics?m_uid={{airport_code}}\" class=\"listlink\">details</a>]
    </td>
   </tr>
  {{/.}}
  </script>

问题是，当渲染超过 1000 个结果时，渲染速度开始呈指数级下降(我猜它一直呈指数级下降:)，但在 1000+ 个结果时，渲染速度明显不是线性的。现在，如果有 4000 个结果，页面加载时间为 2.3 秒。 7000 个结果时，渲染时间为 7.3 秒，渲染完整结果集(大约 8500 个结果)需要 10 秒。现在，我不需要将其加速到 8 秒以内来加载完整结果(因为这是旧功能呈现页面所花费的时间)，这将是一个奖励 :)，但我仍然需要剃须 2 秒。我看过时间轴检查器，时间花在渲染上；渲染在 2.5 秒后开始。

我猜部分问题可能出在我的笔记本电脑上(我的显卡有问题)，但我还是很想知道是否有办法加快速度，例如预编译包含 8500 行的表，并根据需要添加/删除行(这实际上是一个机场列表表，因此数字不会经常更改，即使更改，也不会更改太多)。

Answer 1

新想法:为什么不增量呈现页面呢？我想 8500 行是相当多的“页面”(在 1080p 屏幕上肯定是大约 200 个“页面”)，因此您可以轻松地实现连续滚动机制，您可以根据需要以小块的形式呈现数据。

对于初学者来说，您开始渲染前 500 个项目(这已经很多)，然后当用户开始滚动并接近总滚动大小的 80% 左右时，您渲染 200 个额外的行。你一直这样做，直到用完要渲染的行。

如果您有一个要求说您需要立即提供所有内容(例如，以便用户可以使用 ctrl+F)，您仍然可以尝试分块渲染:而不是将整个数据集提供给模板，将其分解为 500 个一组，并根据需要使用这些较小的集合多次调用 Mustache。如果它仍然堵塞，请在调用之间添加一个小的超时以提高感知响应能力。

TBH，我重新阅读了你的问题，你的大部分时间似乎都花在了浏览器上，试图计算你的表格布局，所以这些建议应该适合你的情况。作为最后的手段，您可以尝试使用 CSS table-layout: fixed; 这将大大加快您的表格渲染速度，但也会反过来强制您手动定义列宽，因为表格将不再动态根据其内容调整列宽。