浅谈angular中优化绑定（脏检查）性能的小技巧

1. 为什么要优化

双向绑定是一柄双刃剑，提高开发效率的同时，也牺牲了性能。当然，随着硬件性能的提升，Angular自身性能的提升，对于一般（中小）复杂度的应用，性能问题可以忽略不计。但是对于特殊场景，或复杂页面来说，我们就需要单独的处理数据绑定问题，否则就会有卡顿的现象，影响用户体验。【相关教程推荐：《angular教程》】

2. 编程习惯方面

平时的一些小技巧，小习惯，都可以改善Angular绑定方面的性能。

2.1. NgForOf，加入trackBy提升性能

trackBy定义如何跟踪可迭代项的更改的函数。在迭代器中添加、移动或删除条目时，指令必须重新渲染适当的 DOM 节点。为了最大程度地减少 DOM 中的搅动，仅重新渲染已更改的节点。

默认情况下，变更检测器假定对象实例标识可迭代对象。提供此函数后，指令将使用调用此函数的结果来标识项节点，而不是对象本身的标识。

2.2. Angular数据绑定的三种方式

div>
        span>
Name {
{
ITem.name}
}
    /span>
      !-- 1. 直接绑定 -->
        span>
Classes {
{
item | classPiPE}
}
    /span>
    !-- 2. pipe方式-->
        span>
Classes {
{
classes(item)}
}
    /span>
    !-- 3.绑定方法调用的结果 -->
    /div>
    

• 直接绑定： 大多数情况下，这都是性能最好的方式。

• 绑定方法调用的结果：在每个脏值检测过程中，classes方程都要被调用一遍。如果没有特殊需求，应尽量避免这种使用方式。

• pipe方式： 它和绑定function类似，每次脏值检测classPipe都会被调用。不过Angular给pipe做了优化，加了缓存，如果item和上次相等，则直接返回结果。

li *ngFor="let item of items;
     index as i;
     trackBy: trackByFn">
    .../li>
    

2.3. 除非需要，都是用单向绑定，减少监控值的个数

对于一般数据来说，都是只需要展示给用户，不需要修改。那么对于这部分数据，使用单向绑定即可(ts-> htML).
如：

!-- 也称插值绑定 -->
     span>
{
{
yourMessage}
}
    /span>
    

3. ChangedetectionStrategy.OnPush 进行性能提升

对于一些很复杂的页面，上面的小技巧就不够用了，不过Angular也是考虑到这些了，提供了不少方法。
Angular 对比 AngularJS 在变化检测上由原来的双向检测(父-> 子，子-> 父)变为了单向(父-> 子)。所以每一次变化检测都会确定性地收敛。
Angular定义一个组件时，可以传入一个变化检测配置项为

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;
    

onpush策略只判断输入的引用(如果是object)是否改变，来判断是否进行脏检查。因此，我们可以使用Onpush策略来减少变化检测的开销。

4. 利用ngzone-runOutsideAngular优化

Angular依赖NgZone来监听异步操作，并从根部执行变化检测。换句话说，我们代码中的每一个 addEventListener都会触发脏检查。但是如果我们非常明确，有些addEventListener要执行的东西，不会（或者说可以忽略）影响数据结果，不想然他触发脏检查。比如监测scroll，监测鼠标事件等。

针对这种情况， 我们可以使用zone提供的runOutsideAngular，让这些事件不触发脏检查。

this.zone.runOutsideAngular(() =>
 {
        window.document.addEventListener('mouSEMove', this.bindMouse);
}
    );
    

5. 手动控制脏检查 ChangeDetectorRef

Angular的ChangeDetectorRef实例上提供了可以绑定或解绑某个组件脏检查的方法。

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架进行变化检查/Change Detection  detach() : void           // 禁止脏检查  detectChanges() : void    // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测  checkNoChanges() : void  reattach() : void         // detach逆操作，启用脏检查}
    

6. 总结

• 平时的一些小习惯，都可以提高angular的性能；

• 针对复杂应用，或者当出现卡顿时，我们也是有办法的！

更多编程相关知识，请访问：编程教学！！

以上就是浅谈angular中优化绑定（脏检查）性能的小技巧的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！