javascript - 加快客户端的数据表加载时间

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 等等。

如果您需要一些代码帮助，请告诉我。