2

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

  <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 行的表并添加/删除行，如果需要（这确实是一个机场列表，所以这个数字不会经常改变，当它改变时，它不会改变太多）。

4

3 回答 3

3

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

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

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

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

于 2013-01-16T19:56:38.693 回答
2

您是否尝试过像Hogan或Handlebars这样的替代 Mustache 实现？

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

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

于 2013-01-16T15:47:42.077 回答
1

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

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

缓慢，许多插入：

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

更快，1 个插入：

var buffer = '';
for () {
  buffer = buffer + Mustache.render(row);
}
table.innerHTML = buffer;
于 2014-08-28T11:10:43.377 回答