ionic 性能優化


1.一次性加載

解決問題:減少上下文中$watch,進而減少內存消耗

ios的內存不想安卓一樣,在安卓上邊運行的很流暢,但是在ios上可能會出現卡頓的情況,尤其是列表可以無限加載的情況,

使用repeater,綁定數據一般是使用{{}}去綁定數據,

由於angular的臟值檢測機制,angular會一直的檢測這個值時都在變動,變動后會通知界面進行變更,但是列表的情況下,我們不需要對一些名稱啊、日期之類的進行檢測,這時候會浪費很多內存去監控這些值的變化,實際上對我們根本沒有用戶,我們根本都不需要對這些值的檢測,這時候我們就需要使用一次性綁定了

使用的方法很簡單,代碼如下:

<!DOCTYPE html>
<html ng-app='app'>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript">
  angular.module('app', [])
    .controller('testCtrl', function($scope, $rootScope) {
      $scope.test_value = 1;
      $scope.testClick = function() {
        $scope.test_value++;
      }
    })
  </script>
</head>

<body>
  <div ng-controller="testCtrl">
    {{test_value}} {{::test_value}}
    <input type="button" ng-click="testClick();" value="test">
  </div>
</body>

</html>

2.ng-repeat的track by屬性

angular存在臟值檢測機制,對於列表我們常用ng-repeat去遍歷循環
數組只要其一個子項的屬性變動,angular會重新渲染界面,dom 操作是很消耗內存的,在查找元素時,track by是避免重復值的,在angular檢測到值變動的時候,也方便在數組對象中查找單一對象【用整個對象對比跟單一個字段查找效果很明顯】,但是track by 字段必須是唯一字段

3.滾動條

采用原生滾動條,不使用jsscroll,原生的比較節約內存

全局配置方法,

angular.module('yourModule').config(function($ionicConfigProvider) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
});

單個頁面配置方法

把overflow-scroll=”true”添加到ion-content中

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM