加速数据表在客户端加载时间

Question

我在客户端使用datatablejs将数据库显示给客户端.我最初使用backbone indexeddb适配器从服务器下载数据库并将其存储在indexedDB中,以支持对数据的脱机访问.但是,数据表大约需要5分钟才能生成20,000个条目.这是我的JS代码:

render_data: function(entity_collection) {
        //create table body in memory
        tbody = $('<tbody>');
        tbody.html('');

        //iterate over the collection, fill row template with each object 
        //and append the row to table
        entity_collection.each(function(model) {
            tbody.append(this.row_template(model.toJSON()));
        }, this);
        //put table body in DOM
        this.$('#list_table')
            .append(tbody);
        //initialize datatable lib on the table    
        this.$('#list_table')
            .dataTable();
        $("#loaderimg")
            .hide();
        $("#sort-helptext").show();
},

表头:

<script type="text/template" id="person_table_template"> 
    <tr> 
        <th>Id</th> 
        <th>Name</th> 
        <th>Father Name</th> 
        <th>Village</th> 
        <th>Group</th> 
        <th></th> 
    </tr> 
</script>

转换为html的JSON:

Object {
    age: 45, 
    father_name: "Jiyan Sah ", 
    gender: "F", 
    group: Object, 
    id: 10000000155392, 
    label: "Gangajali Devi (Sahila Rampur,Jiyan Sah )", 
    online_id: 10000000155392, 
    person_name: "Gangajali Devi ", 
    phone_no: "", 
    resource_uri: "/coco/api/v1/person/10000000155392/", 
    village: Object
}

任何人都可以建议如何提高数据表的性能？

Answer 1

首先,无需在每次迭代时附加数据,您可以在循环后执行一次.

var tmp_str = '';

entity_collection.each(function(model) {
    tmp_str+=this.row_template(model.toJSON())
}, this);

tbody.append(tmp_str);

但是为了真正加速应用程序,我建议你改变渲染方式 - 现在你一次渲染所有数据,并且没有信息监视哪些信息但是客户端.延迟加载可以帮助你 - 例如.如果页面滚动到您渲染的列表的底部+ 100,依此类推前100个项目.

如果您需要一些代码帮助,请告诉我.