-1

我正在构建一个包含数千个列表项且没有分页的数据网格。结果，可以理解的是，实时绑定的性能非常差。有大约 20 个列表项，没有任何滞后。

<thead>
    {{#each columns}}
        <tr><td can-click="sort">{{name}}</td></tr>
    {{/each}}
</thead>
<tbody>
    {{#each thousandsOfItems}}
        <tr><td>{{name}}</td></tr>
    {{/each}}
</tbody>

有没有办法让我的模板的一部分实时绑定，例如<thead>，但对 ? 使用简单的字符串连接/注入<tbody>？

编辑

我的方法可能是问题所在。数以千计的 static<tr>也可能相当滞后。有人建议我在页面滚动时尝试添加/删除行。

4

1 回答 1

0

我制作了一个 JSPerf 在单列表中呈现 4000 行，您可以在此处查看：

http://jsperf.com/can-stache-table-render

这些实验的一些收获：

  • 如果没有实时绑定，您可以获得 10 倍的性能提升。但是，如果您需要的不止这些，您可能需要进行感知性能提升。

  • 当不实时绑定任何数据时，使用 {{#each}} 与仅使用 {{#thousandsOfRows}} 相比没有性能提升

  • 使用 div 代替表格行是我感兴趣的尝试，因为您可以想象更快地看到增量绘图（但实际上，所有这些同步运行，UI 将锁定，直到它全部以这种方式绘制），但它慢 35%绘制整个表格，并且可能最好避免。

那么基于此，我们能做些什么呢？

  • 对表格进行分页，或者更确切地说，绘制许多固定大小的表格，直到数据用完。第一个屏幕将快速渲染，其余的将在您进行时填充。使用 setTimeout() 绘制下一个表格，以免锁定 UI。

  • 使用实时绑定，但使用如下模式对其进行分页：

    var i=0; function loop() { while(i < source_list.length) { list_in_live_binding_context.push.apply( list_in_live_binding_context, source_list.splice(i, 20) ); i += 20; setTimeout(loop, 4); } }

  • 做前两件事之一，但用微调器将结果隐藏在屏幕后面，直到渲染完成

  • 使用 jquery-ui-scrollable ( https://github.com/bseth99/jquery-ui-scrollable ) 来检测元素何时滚动到视图中——使用 Stache 帮助器仅在滚动到视图后才呈现项目，但您需要先预留空间。如果每个单独的行都有与之关联的复杂渲染，这会很有帮助。您可以延迟详细信息，直到它们是必要的。

对不起，这不是一个简单的答案，但这不是一个简单的问题。:) HTH，无论如何。

于 2014-10-04T02:37:45.163 回答