渲染 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 秒。我查看了 Timeline 检查器，时间都花在了渲染上；渲染在 2.5 秒后开始。

我猜部分问题可能出在我的笔记本电脑上（我有一些显卡问题），但我仍然感兴趣是否有办法加快速度，例如预编译包含 8500 行的表，并在需要时添加/删除行（这确实是一个机场列表，所以数字不会经常变化，而且当它发生变化时，变化也不大）。

Answer 1

新想法：为什么不增量渲染页面呢？我想 8500 行是相当多的“页面”（在 1080p 屏幕上肯定有大约 200 个“页面”），因此您可以轻松实现连续滚动机制，根据需要将数据保持在小块中。

假设您开始渲染前 500 个项目（这已经很多），然后当用户开始滚动并接近总滚动大小的 80% 左右时，您会渲染 200 额外的行。你一直这样做，直到你用完要渲染的行。

如果您有一个要求，即您需要立即获得所有可用的东西（例如，以便用户可以 ctrl+F），您仍然可以尝试以块的形式呈现：而不是为您的模板提供整个数据集，将其分解为 500 个一组，并使用这些较小的组根据需要多次调用 Mustache。如果它仍然阻塞，请在调用之间添加一个小超时以提高感知响应能力。

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

Answer 2

您是否尝试过其他 Mustache 实现，例如 Hogan 或 Handlebars？

您的模板很小，因此使用预编译模板功能不会给您带来太多好处，但特别是在 Hogan 的情况下，它经过微调以尽可能加快渲染算法，所以有机会只需使用替代实现而不是 vanilla Mustache 就可以解决您的问题。

另外，如果您还没有使用最新版本的 Mustache.js，您可以尝试简单地升级。旧版本（大约 1.5 年）存在严重的性能问题。

Answer 3

如何将胡须渲染的 HTML 添加到 DOM 中？

尝试一次性添加渲染代码，而不是连续插入。

慢，插入很多：

for () {
  table.innerHTML = table.innerHTML + Mustache.render(row);
}

更快，1 次插入：

var buffer = '';
for () {
  buffer = buffer + Mustache.render(row);
}
table.innerHTML = buffer;