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

文章2022-03-2862 人已阅来源:网络

本篇文章给大家介绍一下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中优化绑定(脏检查)性能的小技巧的详细内容!