Upgrade to Version 1.18.3 causes very slowly page loading

[francogiacobbi]

Bootstraptable version(s) affected: 1.18.3

Description: Environment: ASP.NET 4.6 - Jquery 3.3.1 - Boostrap Framework 3.3.7

I had different asp.net pages based on 1.15.5 version of bootstrap-table and i decided to pass 1.18.3 version for using hideUnusedSelectOptions on table.

Problem arose during transition.

Now testing a page i changed the link to css and js files but now loading data is very slow. We're talking about 110 rows with pagination on client-side.

Analyze performance, with Firefox, on page reload the buffer goes 100% immediately with numerous minor GC Records with Cause: full infirmary and Type: Nursery Collection.

If I use version 1.15.5 this does not happen and the pages are loaded regularly.

The only difference between before and after is version and use of hideUnusedSelectOptions option.

It seems like the page is waiting for something else after taking and loading the data, because the data is shown in the table but the page does not release control to the user as if it is waiting for something else. The service providing the data is functioning correctly and returns the data after approximately 700ms.

Any suggestions to start solving problem ?

Thanks

[wenzhixin]

Please provide an Online Example to show your problem, thanks!

[francogiacobbi]

I'm trying to load an example (that confirms what i wrote yet: very slow loading data respect 1.16.0 version with filtercontrol extension), but when i push save button appears a warning "Please sign in first". I'm logged yet with my account on GitHub. Tried with Edge and Firefox. Same result. On Top Right Border i see my account name "francogiacobbi" but i can't save.

@francogiacobbi francogiacobbi – oauth_authorization.create Created authorization for OAuth application (Online Editor - Bootstrap Table) with scope(s) xxx.xxx.xxx.xxxx Rome, Latium, Italy 29 minutes ago

Any suggestions ?

[francogiacobbi]

I've used this code on OnLine Editor and if you choose last version 1 18 3 loading data and interaction with "filter select control" is very slow. If you choose 1.16.0 version all is ok.

`<table id="tablePS" data-filter-control="true" data-hide-unused-select-options="true" data-pagination="true" data-side-pagination="client">

NEW_DEP UO_ABBREV UO_DESC LEVEL TI TD DP

            </table>

`

[djhvscf]

We're working on a new version of Filter Control that could potentially fix this performance issue

[nmglargaard]

Hi,

I don't know, if you already was aware of this, but it seems to stem from enabling "data-filter-control="select"" for a column with many different items. No performance issues are seen, if using "input" instead. And as the OP mentioned, this issue is not seen for 1.15.5, where even loading multiple thousand rows would be no issue. In 1.18.3 it seems we can only get the same performance up to about 100 rows. Of note: I also updated to use the new "hideUnusedSelectOptions", but issue occurs both w. and w.o. this option specified.

EDIT @djhvscf

I added Online examples (JSFiddle, since your Online Example page wouldn't let me save code examples, even when logged in). 1.18.3 w. 'Select' Filter Control (slow load time) 1.18.3 w. 'Input' Filter Control (fast load time)

1.15.5 w. 'Select' Filter Control (fast-ish load time) 1.15.5 w. 'Input' Filter Control (fast load time)

[djhvscf]

Thanks @nmglargaard

[hurricanecoder]

@djhvscf Our team are also struggling with this performance issue.

We have 25 filter control columns in a bootstrap table, 13 of which are "select" columns. In a table with 2900 rows of data, when we use the "show/hide columns" feature in bootstrap table, the post-body event fires 25 times (one for each column), and the filter control methods fire multiple times, which is locking the page for an excessive amount of time:

When the filter control plugin is disabled the same page loads as expected:

The filter control plugin seems to be performing multiple inefficient loops, rather than iterating over the dataset once and building up the column filters at once. Here we can see that each column takes roughly 500ms of processing time:

And here are the methods using up the most processing time:

Is there a workaround for this issue? Or an ETA on the performance fixes becoming available?

[djhvscf]

This is a really big issue that we have since the root cause of it is that the core of bs was written like that.. Every change that we made in the table fires a redraw work.. which is not good.. We're aware of this problem and we're trying to fix it in the future releases.

Unfortunately at this moment we don't have a spefic workaround.

@wenzhixin @UtechtDustin

[SleeveShirtholes]

@djhvscf, any updates on the fix for this?

[djhvscf]

@SleeveShirtholes can you double check this performance issues with these changes? https://github.com/wenzhixin/bootstrap-table/pull/5583

[MRVDH]

@djhvscf I have the same performance issues, and I cloned the repo, checked out the branch of the PR, built the project and used those files, but I still have the same performance issues.

These are the properties that I use on the table:

<table
    class="table"
    data-toggle="table"
    data-show-columns="true"
    data-search="true"
    data-show-columns-toggle-all="true"
    data-show-search-clear-button="true"
    >

On most columns I have data-sortable="true", data-visible="true|false".

A table with 135 rows and 20 columns takes about 8 seconds to format. In those 8 seconds, you can see the table, but it's unformatted and flows out of the screen, basic bootstrap table, no filtering, sorting, all columns visible. After the 8 second, the complete table is formatted with filtering and sorting and only limited (selected) columns available.

[chsteiner]

This is a really big issue that we have since the root cause of it is that the core of bs was written like that.. Every change that we made in the table fires a redraw work.. which is not good.. We're aware of this problem and we're trying to fix it in the future releases.

Unfortunately at this moment we don't have a spefic workaround.

@wenzhixin @UtechtDustin

The workaround is just to use the older version: https://cdn.jsdelivr.net/npm/bootstrap-table@1.15.5/dist/extensions/filter-control/bootstrap-table-filter-control.min.js . Works with the newest BS-Table version. At least for me. Did i miss something?

A diff between the new version and https://cdn.jsdelivr.net/npm/bootstrap-table@1.15.5/dist/extensions/filter-control/bootstrap-table-filter-control.js should also be helpful, right?

[djhvscf]

Working on this PR https://github.com/wenzhixin/bootstrap-table/pull/6309