Our blazing fast Grid component built with pure JavaScript


Post by b.wust »

Hello Bryntum Team,

if you use stateful in a grid with many columns(>50), you will notice a major increase in rendering time especially if you have multiple regions. Additionally the renderows Event is called 2 times for each region.

As an example you can take the Grid State Demo and add 50 - 100 columns. If you then compare the render time between stateful enabled(4s) and disabled(<1s).


Post by tasnim »

Hi,

I added 100+ columns but seems to be working fine. Can you please provide the data and the steps to reproduce it?


Post by b.wust »

I added the columns to the example. I disabled auto apply.

Then my test steps are simple:
1: comment in/out the stateId to enable/disable stateful
2: apply the change
3: count how many seconds it takes for the state to return to idle

I used the default columns and the following as additional coulumns.
The result is a differences of atleast 2 seconds.

            { id : 'colora', text : 'Color', field : 'color', width : 180, region: 'left' },
            { id : 'colorb', text : 'Color', field : 'color', width : 180, region:'right' },
            { id : 'colorc', text : 'Color', field : 'color', width : 180 },
            { id : 'colord', text : 'Color', field : 'color', width : 180 },
            { id : 'colore', text : 'Color', field : 'color', width : 180 },
            { id : 'colorf', text : 'Color', field : 'color', width : 180 },
            { id : 'colorg', text : 'Color', field : 'color', width : 180 },
            { id : 'colorh', text : 'Color', field : 'color', width : 180 },
            { id : 'colori', text : 'Color', field : 'color', width : 180 },
            { id : 'colorj', text : 'Color', field : 'color', width : 180 },
            { id : 'colork', text : 'Color', field : 'color', width : 180 },
            { id : 'colorl', text : 'Color', field : 'color', width : 180 },
            { id : 'colorm', text : 'Color', field : 'color', width : 180 },
            { id : 'colorn', text : 'Color', field : 'color', width : 180 },
            { id : 'coloro', text : 'Color', field : 'color', width : 180 },
            { id : 'colorp', text : 'Color', field : 'color', width : 180 },
            { id : 'colorq', text : 'Color', field : 'color', width : 180 },
            { id : 'colorr', text : 'Color', field : 'color', width : 180 },
            { id : 'colors', text : 'Color', field : 'color', width : 180 },
            { id : 'colort', text : 'Color', field : 'color', width : 180 },
            { id : 'coloru', text : 'Color', field : 'color', width : 180 },
            { id : 'colorv', text : 'Color', field : 'color', width : 180 },
            { id : 'colorw', text : 'Color', field : 'color', width : 180 },
            { id : 'colorx', text : 'Color', field : 'color', width : 180 },
            { id : 'colory', text : 'Color', field : 'color', width : 180 },
            { id : 'colorz', text : 'Color', field : 'color', width : 180 },
            { id : 'colorA', text : 'Color', field : 'color', width : 180 },
            { id : 'colorB', text : 'Color', field : 'color', width : 180 },
            { id : 'colorC', text : 'Color', field : 'color', width : 180 },
            { id : 'colorD', text : 'Color', field : 'color', width : 180 },
            { id : 'colorF', text : 'Color', field : 'color', width : 180 },
            { id : 'colorG', text : 'Color', field : 'color', width : 180 },
            { id : 'colorH', text : 'Color', field : 'color', width : 180 },
            { id : 'colorI', text : 'Color', field : 'color', width : 180 },
            { id : 'colorJ', text : 'Color', field : 'color', width : 180 },
            { id : 'colorK', text : 'Color', field : 'color', width : 180 },
            { id : 'colorL', text : 'Color', field : 'color', width : 180 },
            { id : 'colorM', text : 'Color', field : 'color', width : 180 },
            { id : 'colorN', text : 'Color', field : 'color', width : 180 },
            { id : 'colorO', text : 'Color', field : 'color', width : 180 },
            { id : 'colorP', text : 'Color', field : 'color', width : 180 },
            { id : 'colorQ', text : 'Color', field : 'color', width : 180 },
            { id : 'colorR', text : 'Color', field : 'color', width : 180 },
            { id : 'colorS', text : 'Color', field : 'color', width : 180 },
            { id : 'colorT', text : 'Color', field : 'color', width : 180 },
            { id : 'colorU', text : 'Color', field : 'color', width : 180 },
            { id : 'colorV', text : 'Color', field : 'color', width : 180 },
            { id : 'colorW', text : 'Color', field : 'color', width : 180 },
            { id : 'colorX', text : 'Color', field : 'color', width : 180 },
            { id : 'colorY', text : 'Color', field : 'color', width : 180 },
            { id : 'colorZ', text : 'Color', field : 'color', width : 180 },
            { id : 'colora1', text : 'Color', field : 'color', width : 180, region: 'left' },
            { id : 'colorb1', text : 'Color', field : 'color', width : 180, region:'right' },
            { id : 'colorc1', text : 'Color', field : 'color', width : 180 },
            { id : 'colord1', text : 'Color', field : 'color', width : 180 },
            { id : 'colore1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorf1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorg1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorh1', text : 'Color', field : 'color', width : 180 },
            { id : 'colori1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorj1', text : 'Color', field : 'color', width : 180 },
            { id : 'colork1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorl1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorm1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorn1', text : 'Color', field : 'color', width : 180 },
            { id : 'coloro1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorp1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorq1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorr1', text : 'Color', field : 'color', width : 180 },
            { id : 'colors1', text : 'Color', field : 'color', width : 180 },
            { id : 'colort1', text : 'Color', field : 'color', width : 180 },
            { id : 'coloru1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorv1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorw1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorx1', text : 'Color', field : 'color', width : 180 },
            { id : 'colory1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorz1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorA1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorB1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorC1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorD1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorF1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorG1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorH1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorI1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorJ1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorK1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorL1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorM1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorN1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorO1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorP1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorQ1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorR1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorS1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorT1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorU1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorV1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorW1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorX1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorY1', text : 'Color', field : 'color', width : 180 },
            { id : 'colorZ1', text : 'Color', field : 'color', width : 180 }
Attachments
ErrorGridStateful.png
ErrorGridStateful.png (220.97 KiB) Viewed 466 times

Post by tasnim »

Hi,

I don't see any delay.

I used your data. Am I missing something?

Please check the gif below

Attachments
MgQLpkuIT0.gif
MgQLpkuIT0.gif (566.66 KiB) Viewed 453 times

Post by b.wust »

I do nor reload the page, because it would revert my changes in the demo example.
I only apply changes after cemmenting in/out the stateId.

Attachments
ErrorGridStateful.gif
ErrorGridStateful.gif (1.46 MiB) Viewed 447 times

Post by johan.isaksson »

Hello,

I profiled it and you are correct, it does a lot of re-renders that it should not. Have opened a ticket on it: https://github.com/bryntum/support/issues/6468

Thanks for reporting it!

Best regards,
Johan Isaksson

Post Reply