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;，这将大大加快您的表格渲染速度，但也会强制您手动定义列宽，因为表格将不再根据其内容动态调整列宽。

Answer 2

您是否尝试过Hogan或Handlebars等备用Mustache实施？

你的模板很小，所以使用预编译的模板功能并不会让你获胜，但特别是在Hogan的情况下，它被精心调整以尽可能加快渲染算法，所以有机会通过简单地使用替代实现而不是vanilla Mustache已经解决了你的问题。

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

Answer 3

如何在DOM中添加小胡子呈现的HTML？

尝试在一个点上添加渲染代码，而不是连续插入。

慢，很多插入：

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

更快，1次插入：

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

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

3 个答案: