angular1.x性能优化

脏数据检查 != 轮询检查更新
谈起angular的 脏检查机制(dirty-checking) , 常见的误解就是认为: ng是定时轮询去检查model是否变更。 
其实,ng只有在指定事件触发后,才进入 $digest cycle :

创新互联于2013年开始,先为酒泉等服务建站,酒泉等地企业,进行企业商务咨询服务。为酒泉企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR响应事件 ( $http )

  • 浏览器Location变更事件 ( $location )

  • Timer事件( $timeout , $interval )

  • 执行 $digest() 或 $apply()

$digest后批量更新UI
传统的JS MVC框架, 数据变更是通过setter去触发事件,然后立即更新UI。 
而angular则是进入 $digest cycle ,等待所有model都稳定后,才批量一次性更新UI。 
这种机制能减少浏览器repaint次数,从而提高性能。

提速 $digest cycle
关键点

尽少的触发$digest (P310)

尽快的执行$digest

优化$watch
$scope.$watch(watchExpression, modelChangeCallback) , watchExpression可以是String或Function。

避免watchExpression中执行耗时操作 ,因为它在每次$digest都会执行1~2次。

避免watchExpression中操作dom,因为它很耗时。

console.log 也很耗时,记得发布时干掉它。(用grunt groundskeeper)

ng-if vs ng-show , 前者会移除DOM和对应的watch

及时移除不必要的$watch。 (angular自动生成的可以通过下文介绍的bindonce )

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

避免深度watch, 即第三个参数为true

减少watch的变量长度 
如下,angular不会仅对 {{variable}} 建立watcher,而是对整个p标签。 
双括号应该被span包裹,因为watch的是外部element

plain text other {{variable}} plain text other

//改为:

plain text other plain text other

//或

plain text other {{variable}} plain text other

$apply vs $digest
$apply会使ng进入 $digest cycle , 并从$rootScope开始遍历(深度优先)检查数据变更。

$digest仅会检查该scope和它的子scope,当你确定当前操作仅影响它们时,用$digest可以稍微提升性能。

参考《mastering web application development with angularjs》 P308

延迟执行
一些不必要的操作,放到 $timeout 里面延迟执行。

如果不涉及数据变更,还可以加上第三个参数false,避免调用 $apply 。

对时间有要求的,第二个参数可以设置为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中执行的 $evalAsync , 会在angular操作DOM之后,浏览器渲染之前执行。

controller中执行的 $evalAsync , 会在angular操作DOM之前执行,一般不这么用。

而使用 $timeout ,会在浏览器渲染之后执行。

优化ng-repeat
限制列表个数

列表对象的数据转换,在放入scope之前处理。如$scope.dataList = convert(dataFromServer)

可以使用 ngInfiniteScroll 来做无限滚动。

使用 track by

刷新数据时,我们常这么做: $scope.tasks = data || []; ,这会导致angular移除掉所有的DOM,重新创建和渲染。
 
若优化为 ng-repeat="task in tasks track by task.id 后,angular就能复用task对应的原DOM进行更新,减少不必要渲染。



新闻标题:angular1.x性能优化
标题URL:http://bzwzjz.com/article/ghdigi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 泸州网站建设 成都响应式网站建设公司 成都网站设计 网站建设 营销型网站建设 成都网站建设 达州网站设计 温江网站设计 成都网站建设 外贸网站设计方案 成都定制网站建设 重庆网站制作 成都网站建设 成都网站设计 成都响应式网站建设 重庆网站制作 成都网站设计 成都网站设计 成都网站建设 成都网站设计 成都响应式网站建设