frappe / datatable

The Missing Javascript Datatable for the Web
https://frappe.io/datatable
MIT License
1.02k stars 163 forks source link

datatable.refresh() takes more than 10x as long to run than rebuilding the table from scratch #136

Open skjbulcher opened 3 years ago

skjbulcher commented 3 years ago

The following output was collected from datatable v1.14, but I get similar output for 1.15.3

    renderDatatable(data=null) {
        console.time('rendertable');
        // display the table
        this.form.set_df_property(this.formAttr.section, 'hidden', false);
        this.form.fields_dict[this.formAttr.section].collapse(false);

        // set up the field to receive the datatable
        this.form.get_field(this.formAttr.field).html(`
            <div id='${this.formAttr.sel.substring(1)}'></div>
        `);

        // render the datatable
        this.table = new DataTable(this.formAttr.sel, {
            ...this.datatableOptions,
            columns : this.columns,
            data    : data || this.data.tableData,
        });

        console.timeEnd('rendertable');

        console.time('REFRESH');
        this.table.refresh();
        console.timeEnd('REFRESH');
    }

Rendering the table with two rows:

rendertable: 60.090087890625 ms
REFRESH: 666.958984375 ms

60ms seems reasonable to create a table with two rows. Note that I have a format function that runs on most columns. 667ms refresh is an over 10x as slow though. What could be causing the slowdown?

There are inconsistencies, although no practice workarounds that I have discovered aside from re-creating the table from scratch.

This is quite interesting: when I profile my cell format method, the initial table render takes longer (expected, since I'm writing to the log), but the refresh no longer takes extra time to run. Note that I am unable to replicate the speedup in the refresh method by simply forcing the format function to take longer; it only appears to respond to console.time():

formatting: 0.02001953125 ms
formatting: 0.01904296875 ms
formatting: 0.004150390625 ms
formatting: 0.005126953125 ms
formatting: 0.004150390625 ms
formatting: 0.00390625 ms
formatting: 0.003173828125 ms
formatting: 0.00390625 ms
formatting: 0.002685546875 ms
formatting: 0.004150390625 ms
formatting: 0.0087890625 ms
formatting: 0.003662109375 ms
formatting: 0.004150390625 ms
formatting: 0.004150390625 ms
formatting: 0.00390625 ms
formatting: 0.004150390625 ms
formatting: 0.01513671875 ms
formatting: 0.007080078125 ms
formatting: 0.004150390625 ms
formatting: 0.003173828125 ms
formatting: 0.003173828125 ms
formatting: 0.003173828125 ms
formatting: 0.0029296875 ms
formatting: 0.0048828125 ms
formatting: 0.0029296875 ms
formatting: 0.00390625 ms
formatting: 0.001953125 ms
formatting: 0.001708984375 ms
formatting: 0.0029296875 ms
formatting: 0.003173828125 ms
formatting: 0.004150390625 ms
formatting: 0.004150390625 ms
formatting: 0.003173828125 ms
formatting: 0.0048828125 ms
rendertable: 364.31201171875 ms
formatting: 0.005859375 ms
formatting: 0.00390625 ms
formatting: 0.0029296875 ms
formatting: 0.007080078125 ms
formatting: 0.003173828125 ms
formatting: 0.002685546875 ms
formatting: 0.00390625 ms
formatting: 0.0029296875 ms
formatting: 0.003173828125 ms
formatting: 0.003173828125 ms
formatting: 0.0029296875 ms
formatting: 0.0029296875 ms
formatting: 0.003173828125 ms
formatting: 0.003173828125 ms
formatting: 0.002685546875 ms
formatting: 0.0029296875 ms
formatting: 0.0029296875 ms
formatting: 0.002685546875 ms
formatting: 0.003173828125 ms
formatting: 0.003173828125 ms
formatting: 0.0029296875 ms
formatting: 0.003173828125 ms
formatting: 0.001953125 ms
formatting: 0.0029296875 ms
formatting: 0.001953125 ms
formatting: 0.0029296875 ms
formatting: 0.003173828125 ms
formatting: 0.001708984375 ms
formatting: 0.003173828125 ms
formatting: 0.002197265625 ms
formatting: 0.004150390625 ms
formatting: 0.001953125 ms
formatting: 0.0029296875 ms
formatting: 0.0029296875 ms
REFRESH: 383.912109375 ms

What's going on here?