If the initialization of tabs is written in good html, in the case of slow network speed, each tab page will be displayed before the tabs are rendered, and it looks like an ordinary div, with poor experience. There are two solutions:

How to write the original tabs:

<div class="easyui-layout" data-options="fit:true" id="costLayOut">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: 'Engineering parameters',,iconCls:'',iniframe: true,href: ''" name="gccs">Engineering parameters</div>
       <div data-options="title: 'Rate parameter', iconCls:'', iniframe: true,href: ''" name="flcs">Rate parameter</div>
   </div>
</div> 

(1) . hide the layout first, and then display it after the page is loaded

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: 'Engineering parameters',,iconCls:'',iniframe: true,href: ''" name="gccs">Engineering parameters</div>
       <div data-options="title: 'Rate parameter', iconCls:'', iniframe: true,href: ''" name="flcs">Rate parameter</div>
   </div>
</div> 

JS:

$(function({
   $('#costLayOut').show(); / / the page will be displayed after loading
}));

(2) Do not write any tabs in html, and add all tabs dynamically in JS

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">  
   </div>
</div> 

JS: add each tab dynamically:

$(function({
  addTab('Engineering parameters','','',"#tabsdeahan",'gccs',true);
  addTab('Rate parameter','','i',"#tabsdeahan",'flcs',true);
}))

function addTab(title, href,icon,tabsId,name,isIframe){    
    var tt = $(tabsId);    
    if (tt.tabs('exists', title)){//Select and refresh the tab if it already exists            
        tt.tabs('select', title);    
        refreshTab({tabTitle:title,url:href});    
    } else {    
         var content="";  
        if (typeof(href) != 'undefined'){    
            content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';    
        } else {    
            content = '';    
        }    
        var addDom = tt.tabs('add',{    
            title:title,
            closable:false,    
            content:content, 
            iniframe: isIframe?isIframe:false,//iframe embedded or not
            iconCls:icon||'icon-default'    
        }); 
        //The name attribute is added to each tab because other processing needs to be done with the name, which can be omitted   
        if(name){
        	var tab = addDom.tabs('getTab',title);
        	if(tab){
        		tab.attr("name",name);
        	}
        }
    }    
}    

function refreshTab(cfg){    
    var refresh_tab = cfg.tabTitle?$(tabsId).tabs('getTab',cfg.tabTitle):$(tabsId).tabs('getSelected');    
    if(refresh_tab && refresh_tab.find('iframe').length > 0){    
	    var _refresh_ifram = refresh_tab.find('iframe')[0];    
	    var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;    
	    _refresh_ifram.contentWindow.location.href=refresh_url;    
    }    
}