Show Dynamics CRM tabs in Javascript loop - performance

Question

I have a performance problem in Dynamics CRM 2015. I have to show all tabs, which are available on form. So my Javascript code look like this:

Xrm.Page.ui.tabs.get().forEach(function (v, i) {
    var performance1 = performance.now();
    v.setVisible(true);
    var performance2 = performance.now();
    console.log(v.getName() + " show process took " + (performance2 - performance1) + " milliseconds.");
});

After run, script writes in console:

tab_10 show process took 4839.822311864544 milliseconds.
tab_13 show process took 5.218640743772994 milliseconds.
tab_14 show process took 4.996419017363223 milliseconds.
tab_7 show process took 3.8835254718323995 milliseconds.
tab_5 show process took 4.66844116813445 milliseconds. 
tab_17 show process took 4.570270927553793 milliseconds.
tab_20 show process took 3.5970468606719805 milliseconds.
tab_8 show process took 3.7335927407548297 milliseconds.
tab_16 show process took 3.5988317741357605 milliseconds.
tab_15 show process took 5.135642267643561 milliseconds.
tab_12 show process took 3.6483631227965816 milliseconds.
tab_19 show process took 6.199896921247273 milliseconds.

Why show of first element took more than 4 seconds (!!!), when next one took 2 - 5 ms???

Answer 1

Use CRM Performance center to capture metrics & study the component wise form load analytics.

Xrm.Page.ui.controls.get("tabname").setVisible(true); 

When executing the above statement setVisible for the first control, the product renders all the related DOM & scripts, hence the ~4 secs. And this reduces for the subsequent calls.

It depends on browser as well how it works.

Maybe instead of setVisible, you can use setDisplayState to bring down the figure somewhat less.

Xrm.Page.ui.tabs.get("tabname").setDisplayState('collapsed')‌​;  
Xrm.Page.ui.tabs.get("tabname").setDisplayState('expanded')‌​;