这篇文章主要介绍了angular中如何优化绑定性能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元张店做网站,已为上家服务,为张店各地企业和个人服务,联系电话:028-86922220
1. 为什么要优化
双向绑定是一柄双刃剑，提高开发效率的同时，也牺牲了性能。当然，随着硬件性能的提升，Angular自身性能的提升，对于一般（中小）复杂度的应用，性能问题可以忽略不计。但是对于特殊场景，或复杂页面来说，我们就需要单独的处理数据绑定问题，否则就会有卡顿的现象，影响用户体验。【相关教程推荐：《angular教程》】
2. 编程习惯方面
平时的一些小技巧，小习惯，都可以改善Angular绑定方面的性能。
2.1. NgForOf，加入trackBy提升性能
trackBy定义如何跟踪可迭代项的更改的函数。在迭代器中添加、移动或删除条目时，指令必须重新渲染适当的 DOM 节点。为了最大程度地减少 DOM 中的搅动，仅重新渲染已更改的节点。
默认情况下，变更检测器假定对象实例标识可迭代对象。提供此函数后，指令将使用调用此函数的结果来标识项节点，而不是对象本身的标识。
2.2. Angular数据绑定的三种方式
Name {{item.name}}
Classes {{item | classPipe}}
Classes {{classes(item)}}
...
2.3. 除非需要，都是用单向绑定，减少监控值的个数
对于一般数据来说，都是只需要展示给用户，不需要修改。那么对于这部分数据，使用单向绑定即可(ts->html).
如：
{{yourMessage}}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逆操作，启用脏检查
}感谢你能够认真阅读完这篇文章，希望小编分享的“angular中如何优化绑定性能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
分享标题：angular中如何优化绑定性能
当前URL：
http://njwzjz.com/article/jsjcee.html
