加入收藏 | 设为首页 | 会员中心 | 我要投稿李大同（https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!

提升AngularJS性能的11条建议

发布时间：2020-12-17 10:11:02 所属栏目：安全来源：网络整理

导读：我是一个刚接触AngularJs的新手（尽管我不是web开发的新手），所以请保持怀疑的态度来看这11条建议。我阅读了很多关于如何提升Angular性能的文章，下面就是我的相关总结。内容列表：最少化/避免监听器（watchers）避免使用ng-repeat。如果你不得不使用ng

我是一个刚接触AngularJs的新手（尽管我不是web开发的新手），所以请保持怀疑的态度来看这11条建议。我阅读了很多关于如何提升Angular性能的文章，下面就是我的相关总结。

内容列表：

最少化/避免监听器（watchers）
避免使用ng-repeat。如果你不得不使用ng-repeat的话，请使用分页或者页面滚动。
如果可能的话，只绑定一次
用$watchCollection 替代 $watch(加入第三个参数)
避免使用重复的过滤器
debounce ng-model
用ng-if 替代ng-show(但是请确认ng-if是否更适合你的项目)
用console.time来检测你的函数
用本地的JavaScript或者Lodash
用Batarang来检测你的监听器
用Chrome Timeline和Profiler 来寻找性能的瓶颈

1.最少化/避免监听器（watchers）

通常来说，如果你的Angular应用比较慢，那么意味着，你有太多的监听器(watcher)，或者是监听器负担超过了本身的职责。

Angular使用dirty-checking来跟踪应用中的所有的改变，这意味着，Angular将遍历所有的监听器（watcher）去检测是否他们需要更新。如果一个监听器又依赖于另外一个监听器，Angular将会不得不再次运行一遍$digest循环，来确保所有的改变都被处理。Angular将会持续不断的进行$digest循环，直到所有的监听器(watcher)都被更新，并且应用趋于稳定。

尽管在浏览器中运行JavaScript非常之快，但是在Angular中很容易添加很多的监听器，以至于你的Angular应用变得很慢。

当实现或者重构你的Angular应用时，请记住以下几点：

http://www.codelord.net/2014/06/17/angular-performance-101-slides/

1.监听器（watcher）在以下情况下建立：

$scope.$watch
{{}}绑定数据
大多数的指令（例如:ng-show）
scope变量 scope:{bar:'='}
过滤器{{value|myFilter }}
ng-repeat

2.监听器运行在：

用户操作(ng-click).
ng-change
ng-model
$http 事件
$q promise API
$timeout
$interval
手动调用$scope.apply和$digest.digest

2.避免使用ng-repeat。如果你不得不使用ng-repeat的话，请使用分页或者页面滚动。

这是我们应用的最大改进(This was the biggest win for our app)。我这里并不会讲太多细节，但是我找到离开很多有用的文章。

http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/

另外关于滚动(infinite scroll)，如果可能的话确保使用track by。

https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates

举例说明：唯一的id，就是在使用ng-repeat 传给 track by 比较好的值

3.如果可能的话，只绑定一次

Angular1.3 增加了 :: 以支持一次绑定。总而言之，Angular第一次$digest循环时，会等待一个稳定的值，然后用该值生成DOM元素。然后，Angular会移除监听器，忘记该绑定。

https://code.angularjs.org/1.3.15/docs/guide/expression#one-time-binding

（可能被墙，我是开着VPN访问的）

如果你用的是1.3之前的版本，你可以用下面这个库实现相同的效果。

https://github.com/Pasvaz/bindonce

4.用$watchCollection 替代 $watch(加入第三个参数)

只有两个参数$watch 运行速度很快。然而，Angular对这个函数支持第三个参数，例如：$watch('value',function(){},true)。第三个参数，告诉Angular执行深度检查，意味着检测对象的每个属性，这样成本非常高。

为了解决这种性能问题，Angular增加了 $watchCollection('value',function(){})。$watchCollection表现的像$watch带有第三个参数一样，除了它只检测对象属性的第一层，因而会极大地提升性能。

官方文档：

https://code.angularjs.org/1.3.15/docs/api/ng/type/$rootScope.Scope#$watchCollection

5.避免重复的过滤器，并且缓存数据

一次绑定在有过滤器的时候表现的不是很好。得像办法让它工作，但是我认为把它直接赋给一个变量会更加的清晰和直观（或者如果你处理很多变量的话，把它设为对象的一个属性）。

例如：

{{'DESCRIPTION' | translate }}

被替换为：

-JS $scope.description: $translate.instant('DESCRIPTION')

-HTML {{::description}}

或者：

{{step.time_modified | timeFormatFilter}}

JavaScript

vartimeFormatFilter=$filter('timeFormatFilter');
step.time_modified=timeFormatFilter(step.time_modified);

HTML{{::Path.time_modified}}

6.限制ng-model更新频率（debounce ng-model）

如果你知道一个ng-model有很多改变的话，你可以de-bounce input输入框。

例如有一个像Google这样的搜索输入框，你可以通过设置ng-model的options : ng-model-options="{ debounce: 250 }

这会确保$digest循环触发的次数不多于250ms一次。

https://docs.angularjs.org/api/ng/directive/ngModelOptions

7.使用ng-if替代ng-show（但是必须适合你自己的项目）

ng-show 会显示一个DOM元素，使用 display:none 可以隐藏它。

ng-if 会移除DOM元素，并且在需要它的时候，再重新创建。

你可能使用ng-show 显示或者隐藏一个元素，在95%的情况下，ng-if是更加适合的方式。

8.使用console.time来检测函数

console.time是一个非常好的API，并且我发现当测试Angular性能的时候，它非常有用。在我的代码里，我调用了很多这个函数，来帮助我确定我重构的Angular的性能。

https://developer.mozilla.org/en-US/docs/Web/API/Console/time

API这样使用：

console.time("TimerName");
//Some code
console.timeEnd("TimerName");

这是一个简单的例子:

console.time("TimerName");
setTimeout(function(){
    console.timeEnd("TimerName");
},100);
//In console $: TimerName: 100.324ms

Note：如果console.time不能满足你的需求的话，你可以使用 preformance.now。如果你选择了这种方式，你必须自己写自己的方法。

https://docs.google.com/presentation/…

totalTime = 0; count = 0;
var someFunction = function() {
  var thisRunStartTime = performance.now();
  count++;
  // some code
 
  // some more code
  totalTime += performance.now() - thisRunStartTime;
};
console.log("Average time: " + totalTime/count);

原文地址：http://www.alexkras.com/11-tips-to-improve-angularjs-performance/#ng-repeat

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!