经验:不带iframe的动态Tabs, 提升性能,加快tab响应速度

hks2002

默认情况下,tab如果使用url属性, 就会默认生成一个iframe. 如果tabs数量很多,就会占用比较多的资源, 最主要的一点是:每个iframe都需要加载一次miniui.js. 这个加载是比较耗时的.如果页面中大量使用了tab元素, 加载这么多次miniui.js,完全没有必要.用如下的方法可以避免生成iframe, 大大提升tab的响应速度.

1. <div id="mainTabs" class="mini-tabs"  activeIndex="0" style="width:100%;height:100%"  bodyStyle="border:0;" maskOnLoad="false" onactivechanged="onMainTabChange">
   
2. <div name="/MainPage/unassignedAlerts" tooltip="未分配通知(Unassigned Alerts)" title="未分配通知" ></div>
   
3. <div name="/MainPage/taskDefinition" tooltip="任务定义批准(Task Definitions to Approve)" title="任务定义批准" ></div>
   
4. <div name="/MainPage/assemblyList" tooltip="组件列表(Assembly List)" title="组件列表" ></div>
   
5. <div name="/MainPage/oilConsumptionStatus" tooltip="滑油消耗(Oil Consumption)" title="滑油消耗" ></div>
   
6. <div name="/MainPage/taskLaborSummary" tooltip="机队工卡工时概要(Task Labor Summary)" title="机队工卡工时概要" ></div>
   
7. <div name="/MainPage/supportingRequired_Tasks" tooltip="支援需求(Supporting Required - Tasks)" title="支援需求" ></div>
   
8. <div name="/MainPage/faultEvaluation" tooltip="故障评估(Fault Evaluation)" title="故障评估" ></div>
   
9. <div name="/MainPage/unassignedAlerts" tooltip="未分配通知(Unassigned Alerts)" title="未分配通知" ></div>
   
10. <div name="/MainPage/claims" tooltip="索赔(Claims)" title="索赔" ></div>
    
11. <div name="/MainPage/workPackagesList" tooltip="工包列表(Work Packages List)" title="工包列表" ></div>
    
12. <div name="/MainPage/fleetDueList" tooltip="机队任务清单(Fleet Due List)" title="机队任务清单" ></div>
    
13. <div name="/MainPage/fleetList" tooltip="机队清单(Fleet List)" title="机队清单" ></div>
    
14. <div name="/MainPage/taskLaborSummary" tooltip="机队工卡工时概要(Task Labor Summary)" title="机队工卡工时概要" ></div>
    
15. <div name="/MainPage/looseInventoryDue" tooltip="离翼物品任务期限(Loose Inventory Due)" title="离翼物品任务期限" ></div>
    
16. <div name="/MainPage/planningViewer" tooltip="计划图(Planning Viewer)" title="计划图" ></div>
    
17. <div name="/MainPage/unassignedAlerts" tooltip="未分配通知(Unassigned Alerts)" title="未分配通知" ></div>
    
18. <div name="/MainPage/claims" tooltip="索赔(Claims)" title="索赔" ></div>
    
19. <div name="/MainPage/workPackagesList" tooltip="工包列表(Work Packages List)" title="工包列表" ></div>
    
20. <div name="/MainPage/fleetDueList" tooltip="机队任务清单(Fleet Due List)" title="机队任务清单" ></div>
    
21. <div name="/MainPage/fleetList" tooltip="机队清单(Fleet List)" title="机队清单" ></div>
    
22. </div>

复制代码

1. function onMainTabChange(e){
   
2.         var tabs = mini.get("mainTabs");
   
3.         var tab=tabs.getActiveTab();
   
4.         var el= tabs.getTabBodyEl(tab);
   
5.        
   
6.          $.ajax({
   
7.                  url:e.tab.name,  //name is url
   
8.                  success:function(data){
   
9.              el.innerHTML=data;
   
10.              mini.parse();                         
    
11.                  }
    
12.                  });
    
13.        
    
14. }

复制代码

要点:
1. <div class="mini-tabs">增加一个onactivechanged事件处理过程.
2. <div> tab不要使用url属性(使用了就会生成iframe), 将url信息写到name属性中.
3. onactivechanged事件过程中,根据name属性包含的url信息, 执行ajax请求.
4. 请求返回的内容填入tab的body中, 然后执行一次mini.parse().

felt

一个页面太复杂了也会影响效率的，所以我们复杂的tabs用url加载内容的。
虽然多加载了一次js，但是这个开销是不大的。

hks2002

权衡考虑吧, 因为我的页面分离得比较细, 单个tab页面的源代码很小, 只有几K而已, 实在是不想每个页面都附带700多K的miniui.js. 这样显得头重脚轻的感觉. 还有一个考虑就是, 我的页面切换后都是获得最新的内容, 所以不太能忍受每个页面附带一次miniui.js.

hks2002

felt 发表于 2017-10-9 09:12
一个页面太复杂了也会影响效率的，所以我们复杂的tabs用url加载内容的。
虽然多加载了一次js，但是这个开销 ...

页面tabs多了以后, mini.parse()是会耗时变多吧?不过也没关系, 切换tab前, onbeforeactivechanged 事件里在把旧tab的内容清空就ok了.

dforce

hks2002 发表于 2017-10-9 16:32
页面tabs多了以后, mini.parse()是会耗时变多吧?不过也没关系, 切换tab前, onbeforeactivechanged 事件里 ...

理论上这样是可以的，但是如果要切换回来的话还是需要重新加载内容了。