jQuery MiniUI

标题: 经验:不带iframe的动态Tabs, 提升性能,加快tab响应速度 [打印本页]
作者: hks2002    时间: 2017-10-2 15:59:59     标题: 经验:不带iframe的动态Tabs, 提升性能,加快tab响应速度

默认情况下,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    时间: 2017-10-9 09:12:09

一个页面太复杂了也会影响效率的，所以我们复杂的tabs用url加载内容的。
虽然多加载了一次js，但是这个开销是不大的。
作者: hks2002    时间: 2017-10-9 16:26:30

本帖最后由 hks2002 于 2017-10-9 16:28 编辑

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

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

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

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

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



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2