Golden-layout: Tab switching and moving gets very slow on components that hold complex HTML content.
GoldenLayout behaves very quick on barely "empty" components.
Having a few components, each holding some more complex HTML content, actions like tab switching and tab moving (removeChild/addChild) get really slow, notably (but not only) on IE.
Please see the fiddle with 4 components, each holding a simple 200 x 20 table:
https://jsfiddle.net/8g9L1uxh/
On IE 11, tab switching the above example is ridiculously slow...
gadget60
All 7 comments
I have the same problem. I'm loading large documents into tabs. Switching between them is very slow.
Maybe if there's some way to leave tab content in the DOM and just hide it when the tab isn't active?
jcford73
on 7 Nov 2016
The problem is that when you switch between tabs, the size of each tab containers is updated using the tabs content, even for hidden tabs. To retrieve the content size of hidden tabs, jQuery has to unhide the content which causes a reflow. It seems like redrawing table elements is pretty expensive, and since each tab content size is retrieved 4 times, the whole process can take multiple seconds to finish :( Interestingly, the impact is pretty low on tables made of div elements (like the table on the golden layout start page).
The problem does not really happens with visible tabs content because they are already drawn, so their size is already available.
To fix that, have a look at brouvio@70bb056 which prevents updating the size of hidden tabs (quick testings indicate this doesn't break anything). You can check it fixes your fiddle performances here.
Maybe if there's some way to leave tab content in the DOM and just hide it when the tab isn't active?
FYI, it already works that way.
brouvio
on 16 Nov 2016
@brouvio Thank you for your hint to your patch, it was a live saver for me. I have some (hidden) highly complex HTML and opening/closing of a new tab took nearly 3 seconds. With your patch, it opens/closes in a fraction of a second again. Do you see any chance to have this merged into the official product?
Edit: This was an issue with Firefox (version 50) in Chrome (version 56), there were no performance issues.
uklimaschewski
on 14 Mar 2017
We'd happily take a look at merging a PR of this patch if you have the time @brouvio :)
mattgodbolt
on 14 Mar 2017
I created a PR, hope that's ok. It's really important for me.
uklimaschewski
on 14 Mar 2017
@uklimaschewski No problem, changes are pretty straightforward, I don't need credits for them.
brouvio
on 14 Mar 2017
Hello. Issue is still actual. Furthermore, slow tab switching in IE 11 and Edge can cause unwanted selected tab dragging. This behaviour can be easily reproduced in fiddle from first post or here: https://jsfiddle.net/czafryo2/
Just click on stack caret and select any slide: it will be opened in new row/column.
EgorBushmelev
on 8 Oct 2018
Related issues
soh1988
路
6Comments
JohnKiller
路
5Comments
ldetomi
路
5Comments
panyam
路
4Comments
Sedawa
路
5Comments
Most helpful comment
The problem is that when you switch between tabs, the size of each tab containers is updated using the tabs content, even for hidden tabs. To retrieve the content size of hidden tabs, jQuery has to unhide the content which causes a reflow. It seems like redrawing table elements is pretty expensive, and since each tab content size is retrieved 4 times, the whole process can take multiple seconds to finish :( Interestingly, the impact is pretty low on tables made of div elements (like the table on the golden layout start page).
The problem does not really happens with visible tabs content because they are already drawn, so their size is already available.
To fix that, have a look at brouvio@70bb056 which prevents updating the size of hidden tabs (quick testings indicate this doesn't break anything). You can check it fixes your fiddle performances here.
FYI, it already works that way.