angular1.x性能優(yōu)化-創(chuàng)新互聯(lián)

臟數(shù)據(jù)檢查 != 輪詢檢查更新
談起angular的 臟檢查機制(dirty-checking) , 常見的誤解就是認(rèn)為： ng是定時輪詢?nèi)z查model是否變更。 
其實，ng只有在指定事件觸發(fā)后，才進入 $digest cycle ：

成都創(chuàng)新互聯(lián)公司主營西青網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),西青h5微信小程序定制開發(fā)搭建,西青網(wǎng)站營銷推廣歡迎西青等地區(qū)企業(yè)咨詢

  • DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )

  • XHR響應(yīng)事件 ( $http )

  • 瀏覽器Location變更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 執(zhí)行 $digest() 或 $apply()

$digest后批量更新UI
傳統(tǒng)的JS MVC框架, 數(shù)據(jù)變更是通過setter去觸發(fā)事件，然后立即更新UI。 
而angular則是進入 $digest cycle ，等待所有model都穩(wěn)定后，才批量一次性更新UI。 
這種機制能減少瀏覽器repaint次數(shù)，從而提高性能。

提速 $digest cycle
關(guān)鍵點

盡少的觸發(fā)$digest (P310)

盡快的執(zhí)行$digest

優(yōu)化$watch
$scope.$watch(watchExpression, modelChangeCallback) , watchExpression可以是String或Function。

避免watchExpression中執(zhí)行耗時操作 ，因為它在每次$digest都會執(zhí)行1~2次。

避免watchExpression中操作dom，因為它很耗時。

console.log 也很耗時，記得發(fā)布時干掉它。（用grunt groundskeeper）

ng-if vs ng-show ， 前者會移除DOM和對應(yīng)的watch

及時移除不必要的$watch。 （angular自動生成的可以通過下文介紹的bindonce ）

var unwatch = $scope.$watch("someKey", function(newValue, oldValue){  //do sth...
  if(someCondition){    //當(dāng)不需要的時候,及時移除watch
    unwatch();
  }
});

避免深度watch， 即第三個參數(shù)為true

減少watch的變量長度 
如下，angular不會僅對 {{variable}} 建立watcher，而是對整個p標(biāo)簽。 
雙括號應(yīng)該被span包裹，因為watch的是外部element

<p>plain text other {{variable}} plain text other</p>//改為:<p>plain text other <span ng-bind='variable'></span> plain text other</p>//或<p>plain text other <span>{{variable}}</span> plain text other</p>

$apply vs $digest
$apply會使ng進入 $digest cycle , 并從$rootScope開始遍歷(深度優(yōu)先)檢查數(shù)據(jù)變更。

$digest僅會檢查該scope和它的子scope，當(dāng)你確定當(dāng)前操作僅影響它們時，用$digest可以稍微提升性能。

參考《mastering web application development with angularjs》 P308

延遲執(zhí)行
一些不必要的操作，放到 $timeout 里面延遲執(zhí)行。

如果不涉及數(shù)據(jù)變更，還可以加上第三個參數(shù)false，避免調(diào)用 $apply 。

對時間有要求的，第二個參數(shù)可以設(shè)置為0。

$http.get('http://path/to/url').success(function(data){  
    $scope.name = data.name;  
    $timeout(function(){        //do sth later, such as log
      }, 0, false);
});

$evalAsync vs $timeout

directive中執(zhí)行的 $evalAsync ， 會在angular操作DOM之后，瀏覽器渲染之前執(zhí)行。

controller中執(zhí)行的 $evalAsync ， 會在angular操作DOM之前執(zhí)行，一般不這么用。

而使用 $timeout ，會在瀏覽器渲染之后執(zhí)行。

優(yōu)化ng-repeat
限制列表個數(shù)

列表對象的數(shù)據(jù)轉(zhuǎn)換，在放入scope之前處理。如$scope.dataList = convert(dataFromServer)

可以使用 ngInfiniteScroll 來做無限滾動。

使用 track by

刷新數(shù)據(jù)時，我們常這么做： $scope.tasks = data || []; ，這會導(dǎo)致angular移除掉所有的DOM，重新創(chuàng)建和渲染。
 
若優(yōu)化為 ng-repeat="task in tasks track by task.id 后，angular就能復(fù)用task對應(yīng)的原DOM進行更新，減少不必要渲染。


另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：angular1.x性能優(yōu)化-創(chuàng)新互聯(lián)
鏈接地址：http://bm7419.com/article0/hdgio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計公司、服務(wù)器托管、定制網(wǎng)站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名