修改

Question

我正在构建一个包含数千个列表项且没有分页的数据网格。因此，可以理解的是，带有动态绑定的性能非常差。有大约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>使用简单的字符串连接/注入？

修改

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

Answer 1

我在一个列表中创建了一个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。

CanJS部分是实时视图，部分不是吗？

修改

1 个答案: