再谈Angular4 脏值检测(性能优化)

前端之家收集整理的这篇文章主要介绍了再谈Angular4 脏值检测(性能优化)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Summary

Angular 4的脏值检测是个老话题了,而理解这个模型是做Angular性能优化的基础。因此,今天我们再来聊聊Angular 4脏值检测的原理,并看看性能优化的小提示

进入点 - Zone.js

Angular 4是一个MVVM框架。数据模型(Model)转换成视图模型(viewmodel)后,绑定到视图(View)上渲染成肉眼可见的页面。因此,发现数据模型变化的时间点是更新页面的关键,也是调用脏值检测的关键。

经过分析,工程师们发现,数据的变化往往由macrotask和microtask等异步事件引起。因此,通过重写浏览器所有的异步API,就能从源头有效地监听数据变化。Zone.js就是这样一个猴子脚本(Monkey Patch)。Angular 4使用了一个定制化的Zone(NgZone),它会通知Angular可能有数据变化,需要更新视图中的数据(脏值检测)。

脏值检测(Change Detection)

脏值检测的基本原理是存储旧数值,并在进行检测时,把当前时刻的新值和旧值比对。若相等则没有变化,反之则检测到变化,需要更新视图。

Angular 4把页面切分成若干个Component(组件),组成一棵组件树。进入脏值检测后,从根组件自顶向下进行检测。Angular有两种策略:Default和OnPush。它们配置在组件上,决定脏值检测过程中不同的行为。

Default - 缺省策略

ChangeDetectionStrategy.Default。它还意味着一旦发生可能有数据变化的事件,就总是检测这个组件。

脏值检测的操作基本上可以理解为以下几步。1)更新子组件绑定的properties,2)调用子组件的NgDoCheck和NgOnChanges生命周期钩子(Lifecycle hook),3)更新自己的DOM,4)对子组件脏值检测。这是一个从根组件开始的递归方程。

{ child.NgDoCheck(); child.NgOnChanges(); }; updateDom(component); component.children.forEach(child => changeDetection(child)); }

我们开发者会非常关注DOM更新的顺序,以及调用NgDoCheck和NgOnChanges的顺序。可以发现:

  1. DOM更新是深度优先的
  2. NgDoCheck和NgOnChanges并不是(也不是深度优先)

OnPush - 单次检测策略

ChangeDetectionStrategy.OnPush。只在Input Properties变化(OnPush)时才检测这个组件。因此当Input不变时,它只在初始化时检测,也叫单次检测。它的其他行为和Default保持一致。

需要注意的是,OnPush只检测Input的引用。Input对象的属性变化并不会触发当前组件的脏值检测。

虽然OnPush策略提高了性能,但也是Bug的高发地点。解决方案往往是将Input转化成Immutable的形式,强制Input的引用改变。

Tips

数据绑定

Angular有3种合法的数据绑定方式,但它们的性能是不一样的。

直接绑定数据

  • Name {{item.name}} Classes {{item.classes}}
  • 大多数情况下,这都是性能最好的方式。

    绑定一个function调用结果

  • Name {{item.name}} Classes {{classes(item)}}
  • 在每个脏值检测过程中,classes方程都要被调用一遍。设想用户正在滚动页面,多个macrotask产生,每个macrotask都至少进行一次脏值检测。如果没有特殊需求,应尽量避免这种使用方式。

    绑定数据+pipe

  • Name {{item.name}} Classes {{item | classPipe}}
  • 它和绑定function类似,每次脏值检测classPipe都会被调用。不过Angular给pipe做了优化,加了缓存,如果item和上次相等,则直接返回结果。

    NgFor

    多数情况下,NgFor应该伴随trackBy方程使用。否则,每次脏值检测过程中,NgFor会把列表里每一项都执行更新DOM操作。

  • Reference

    1. He who thinks change detection is depth-first and he who thinks it's breadth-first are both usually right
    2. Angular Runtime Performance Guide

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/32652.html

    猜你在找的JavaScript相关文章