-1

我正在構建數以千計的列表項並且沒有分頁的數據網格。因此，使用實時綁定的性能可以理解地很差。有20個列表項目，沒有任何延遲。CanJS部分實時視圖，部分不是？

<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>也可能相當滯後。有人建議我在頁面滾動時嘗試添加/刪除行。

來源

2014-10-03 Steven Vachon

你使用can.Stache還是can.Mustache？能夠。Stache具有更快的性能，但可能不夠快，不能被視爲解決方案。 – 2014-10-04 01:47:42

使用can.stache – 2014-10-10 14:20:16

我做了一個JSPerf渲染4000行的一列的表，你可以在這裏看看：

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

從這些實驗中的一些外賣：

沒有現場結合你可以獲得10倍的性能提升。如果你需要的不僅僅是這些，你可能必須要提高性能。
當不住約束力的任何數據，有沒有性能提升，使用{{#each}}而不只是{{#thousandsOfRows}}
使用div的，而不是錶行是我感興趣的是嘗試因爲你可以想像得更快地看到增量繪圖（但實際上，所有這些都是同步運行的，用戶界面將鎖定，直到全部繪製完成），但繪製整個表格的速度要慢35％，並且最好避免。

基於此，我們該怎麼做？

頁表或更確切地說，繪製許多固定大小的表格，直到數據用完。第一個屏幕會快速渲染，其餘的會隨着您的進行而填充。使用setTimeout（）繪製下一個表，以便不鎖定UI。
使用Live綁定，但頁面它使用的模式是這樣的：

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-04 02:37:45

CanJS部分實時視圖，部分不是？

編輯

回答

相關問題