angular1中ng-repeat效率優化方法:


1.當 ng-repeat 的數組被替換時, 它默認並不會重新利用已有的 Dom 元素,而是直接將其全部刪除並重新生成新的數組 Dom 元素:

2.Dom 的頻繁操作是非常不友好的, ng-repeat為什么不能利用已有的 dom 元素去更新數據呢?因為你沒有把數組元素的標識屬性告訴它,那么兩次替換的時候它就沒辦法追蹤了;

3.ng-repeat會為每一個元素加上一個hashkey $$hashKey來識別每一個元素,當我們從后端重新獲取數據時,即使數據完全一樣,但是由於hashKey不一樣,

  angular會刪除之前的所有dom,重新生成新的dom,這樣效率就會大大降低。可以理解為ng-repeat默認是 track by $$hashKey的。

  所以,我們應該使用一些不會變的東西來作為標識,比如后端數據的id.

4.列如:

<li class="gwclist" ng-repeat = "gwc in data | orderBy:'-sqtime' track by gwc.ID" ng-click = "gwcdetail(gwc)">
  <h5>申請人:{{gwc.sqname}}<span class="pull-right color-dimgray">{{gwc.sqtime}}</span></h5>
  <span>用餐時間:{{gwc.mettime}}</span>
<p ng-class="{0:'color-lightyellow',1:'color-red',2:'color-blue',3:'color-dimgray'}[{{gwc.processState | showstyle}}]">流程狀態:{{gwc.processState}}</p> <div class="button-bar" ng-if = "gwc.processState == '未提交'"> <a class="button button-small button-positive" ng-click="submit(gwc.ID)">提交</a> <a class="button button-small button-stable" ng-click="delete(gwc.ID)">刪除</a> </div> </li>
優點:這樣當重新獲取數據時,由於ID沒有變,angular就不會去刪除原來的dom,只會更新其中的內容,不同的ID再添加新的dom。效率就能提升了;

5.注意:

    track by要放在orderBy之后,否則會影響orderBy的效果;

    當單一數組有重復元素時,需要使用track by $index來保證兩個元素都會渲染,否則只會渲染一個;

 


免責聲明!

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



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