JQuery Mobile效能緩慢的原因 $('#divID').trigger('create')

開發手機網頁的時候，將html、js、css、image等程式放在apk裡，讓WebView直接讀取apk裡的程式。測試的時候，卻發現手機越操作越慢。明明沒有執行什麼額外的程式。

最後發現是這個語法造成的 $('#divID').trigger('create')
將這個DIV裡的按鈕、List、下拉選單等一起初始化成，JQuery Mobile的樣式
將這一行註解掉，測試APP，發現網頁速度快很多

其他人也碰到這個問題

找到網路上的建議，把物件依照類別自己加上樣式初始化的語法，可以優化速度

按鈕 Button
$("input[type='button']").button();

列表 List
$('ul').listview();

下拉選單 Select
$("select").not("select[data-role='flipswitch']").selectmenu();

頁面區塊的縮合 Collapsible
$("div[data-role='collapsible']" ).collapsible();

群組按鈕 Controlgroup
$("fieldset[data-role='controlgroup']").controlgroup();

彈出視窗 Popup Window

$("#myPopupDiv").popup();

其他物件的初始化可以參考官網

每初始化一種物件，就測試一下速度。最後發現是這個造成的 $("#myPopupDiv").popup();

必須自己另外寫把DIV顯示和置中的語法

//初始化彈出視窗

$('#popupDivID').dPopup();

//關閉視窗

$('#popupDivID').dPopup('close');


JSBin

<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script>

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

jQuery.fn.dPopup = function (ActionParam) {
      ActionParam=ActionParam||"";
   
   switch(ActionParam){
     case "close":
    $('#panelPopup').hide();
    $(this).hide();
    break;
    
  default:
   dismissibleStr="";
   if($(this).attr("data-dismissible")!=undefined){
      dismissibleStr=$(this).attr("data-dismissible");
   }
   
   if(dismissibleStr=="false"){
    $("#panelPopup").unbind('click');
   }else{
    popupObj=$(this);
    $("#panelPopup").unbind('click').bind('click', function () {
     $(popupObj).dPopup('close');
    });
   }
      $(this).find("fieldset[data-role='controlgroup']").controlgroup();
         $("#panelPopup").show();
      $(this).show();
      $(this).center();
      break;
   }

}

</script>
  <style>
    #panelPopup{
  z-index:999999998;
  position: absolute !important;
  left: 0px !important;
  top: 0px !important; 
  width:100%;
  height:100%;
  
  background: #252525 !important;
  filter:Alpha(Opacity=50) !important;
  opacity:0.5 !important;
}
.PopupStyle{
  background:white;
  border-radius: 8px;
  position: absolute !important;
  z-index:999999999;
}
  </style>
  <div id="panelPopup" style="display:none"></div>
  <div id="popupDivID" class="PopupStyle" style="display:none">
    123456<br/>7890<br/>
    <input type="button" onClick="$('#popupDivID').dPopup('close');" value="關閉"/>
  </div>
  <input type="button" onClick="$('#popupDivID').dPopup();" value="開啟視窗"/>
</body>
</html>

--------
DIV置中

2016年2月2日 星期二

JQuery Mobile效能緩慢的原因 $('#divID').trigger('create')

2016年2月2日星期二