Question about tabs - Performance problem

[edjeasyui]

Hallo all!

In our application we add easyui tabs using the href attribute.

Code:

			
$("#selectorX").tabs("add", {
	title: 'title',
         href: 'url'
	});

Each tab contains many easy ui components (one layout, grids, forms, dateboxes, etc)

When we add many tabs we have serious performance impact (at Internet Explorer 10).

Below is the time that takes for each tab to load (server will repospond with the same content)

1st tab :  8sec
2nd tab: 10sec
3d tab  : 15sec
7th tab: 30 sec

Question 1
Can you understand what causes this performance impact?

Question 2
When we add tabs using the href attribute the easyui builds the components that are described in the markup although it is an ajax call.
To be more precise when addTab is called and server responds with <input  class="easyui-datebox"> then easy ui creates a datebox.
The same does not happen when we make an ajax call and append markup to dom. Then we have to explicitly make the datebox in javascript.
So is it possible that easyui when we call addTab recreates all the components in all tabs so that causes the performance impact?

Question 3
If I use unique ids for the elements of each tab will this cause a performance imporevement? Now as it is we have many elements with
the same id each of them exists in a separate tab

Regards
Michalis

[stworthy]

When calling 'add' method to add a new tab panel, the panel become selected by default. If a tab panel is selected, its href content will be loaded and parsed. This cause some performance losing if adding too many tab panels with many components.
To get more better performance, please use delay loading tech, i.e. set 'selected' property to false.

Code:

var t = $('#selectorX');
for(var i=0; i<10; i++){
  t.tabs('add', {
    title: 'title'+i,
    href: '...',
    selected:false
  });
}

If load an external page to a <div> element, please use $.parser.parse method to parse its components after loaded.

Code:

<div id="cc"></div>
$.get(...,function(data){
  $('#cc').html(data);
  $.parser.parse($('#cc'));
});

[edjeasyui]

Thanks a lot for the quick answer.

The question actually is why one tab loads slower when already other tabs exists in the application.
Is it cause of the rising size of the DOM?

[stworthy]

Adding too many components at a time may take a little while. But adding with 'selected' property set to false is quick since the contents are not loaded yet. When call 'select' method or click the tab strip to select a tab panel, its contents will be loaded via ajax calling.

[edjeasyui]

Yes I understand this..

From profiler I figured out that the dateboxes take to much time to render.
Do you have any suggestion for reducing time for datebox rendering?

Thanks again

[stworthy]

To improve rendering datebox components, the better way is to share one calendar component. This feature will be available since version 1.3.5. The updated datebox plugin can be downloaded from http://www.jeasyui.com/easyui/plugins/jquery.datebox.js.

Code:

	<input class="easyui-datebox" sharedCalendar="#sc"></input>
	<input class="easyui-datebox" sharedCalendar="#sc"></input>
	<div id="sc" class="easyui-calendar"></div>

[edjeasyui]

Thanks again,

I'll give it a try and I'll inform the forum about the performance improvement.

By the way when go you plan to release the 1.3.5 version?

[leela]

Hi,

 I am having the same problem reported by Ed. The time it takes to open the tab is dependent on the number of tabs already open.
 It varies from 2 secs to 24 secs for the same form.

 Ed,

 Please let me know how did you solve your problem? I am already using shared calendar. Doesn't seem to help much.
 Really appreciate any answer.

Thanks,

[tech_birbal]

Hi Leela,

which version of jeasyui you are using  , these bugs are fixed in latest version of jeasyui 1.4. 

Thanks

Hi,

 I am having the same problem reported by Ed. The time it takes to open the tab is dependent on the number of tabs already open.
 It varies from 2 secs to 24 secs for the same form.

 Ed,

 Please let me know how did you solve your problem? I am already using shared calendar. Doesn't seem to help much.
 Really appreciate any answer.

Thanks,

[gordis gmbh]

Unfortunately this performance problem of switching between already loaded tabs persists even with easyui 1.5.x

Demo: http://jsfiddle.net/6NXjB/26/

Click on a few "Platform Instance" tabs and then try switching between tabs "My Platforms" and "My Apps" or between "Platform 1" and "Platform 2"

I posted the problem hier: https://www.jeasyui.com/forum/index.php?topic=6921.0

As you can see there are no dateboxes rendered in the tabs; only datagrid with pagination.

Any idea to speed up switching of tabs?