再谈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)对子组件脏值检测。这是一个从根组件开始的递归方程。
// This is not Angular code function changeDetection(component) { updateProperties(component.children); component.children.forEach(child => { child.NgDoCheck(); child.NgOnChanges(); }; updateDom(component); component.children.forEach(child => changeDetection(child)); }
我们开发者会非常关注DOM更新的顺序,以及调用NgDoCheck和NgOnChanges的顺序。可以发现:
- DOM更新是深度优先的
- NgDoCheck和NgOnChanges并不是(也不是深度优先)
OnPush - 单次检测策略
ChangeDetectionStrategy.OnPush。只在Input Properties变化(OnPush)时才检测这个组件。因此当Input不变时,它只在初始化时检测,也叫单次检测。它的其他行为和Default保持一致。
需要注意的是,OnPush只检测Input的引用。Input对象的属性变化并不会触发当前组件的脏值检测。
虽然OnPush策略提高了性能,但也是Bug的高发地点。解决方案往往是将Input转化成Immutable的形式,强制Input的引用改变。
Tips
数据绑定
Angular有3种合法的数据绑定方式,但它们的性能是不一样的。
直接绑定数据
<ul> <li *ngFor="let item of arr"> <span>Name {{item.name}}</span> <span>Classes {{item.classes}}</span><!-- Binding a data directly. --> </li> </ul>
大多数情况下,这都是性能最好的方式。
绑定一个function调用结果
<ul> <li *ngFor="let item of arr"> <span>Name {{item.name}}</span> <span>Classes {{classes(item)}}</span><!-- Binding an attribute to a method. The classes would be called in every change detection cycle --> </li> </ul>
在每个脏值检测过程中,classes方程都要被调用一遍。设想用户正在滚动页面,多个macrotask产生,每个macrotask都至少进行一次脏值检测。如果没有特殊需求,应尽量避免这种使用方式。
绑定数据+pipe
<ul> <li *ngFor="let item of instructorList"> <span>Name {{item.name}}</span> <span>Classes {{item | classPipe}}</span><!-- Binding data with a pipe --> </li> </ul>
它和绑定function类似,每次脏值检测classPipe都会被调用。不过Angular给pipe做了优化,加了缓存,如果item和上次相等,则直接返回结果。
NgFor
多数情况下,NgFor应该伴随trackBy方程使用。否则,每次脏值检测过程中,NgFor会把列表里每一项都执行更新DOM操作。
@Component({ selector: 'my-app', template: ` <ul> <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li> </ul> <button (click)="getItems()">Refresh items</button> `, }) export class App { collection; constructor() { this.collection = [{id: 1}, {id: 2}, {id: 3}]; } getItems() { this.collection = this.getItemsFromServer(); } getItemsFromServer() { return [{id: 1}, {id: 2}, {id: 3}, {id: 4}]; } trackByFn(index, item) { return index; } }
Reference
- He who thinks change detection is depth-first and he who thinks it's breadth-first are both usually right
- Angular Runtime Performance Guide
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Ubuntu12.04安装QQ for Linux
- 树莓派:最好的安排
- idea 高级调试技巧
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后
- mybatis: 利用多数据源实现分库存储
- 树莓派:文本编辑器与文件
- Java常用类(三)之StringBuffer与StringBuidler
- 使用监听器:定时清除map缓存
- 树莓派:光阴的故事
- lombok在IntelliJ IDEA下的使用
- 基础野:细说浮点数
- 微信开发如何保证access_token/jsapi_ticket长期有效
- struts2(五)之struts2拦截器与自定义拦截器
- 自定义的html radio button的样式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel框架Eloquent ORM新增数据、自定义时间戳及批量赋值用法详解
- PHP使用HTML5 FileApi实现Ajax上传文件功能示例
- python3.7调试的实例方法
- Laravel框架控制器,视图及模型操作图文详解
- PHP实现带进度条的Ajax文件上传功能示例
- 基于selenium及python实现下拉选项定位select
- PHP rmdir()函数的用法总结
- thinkphp5修改view到根目录实例方法
- openCV提取图像中的矩形区域
- PHP二维索引数组的遍历实例分析【2种方式】
- Selenium及python实现滚动操作多种方法
- PHP使用JPGRAPH制作圆柱图的方法详解
- PHP 实现超简单的SESSION与COOKIE登录验证功能示例
- PHP 图像处理与SESSION制作超简单验证码的方法示例
- 简述PHP7.4 新特性和废弃的功能