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


Posted in Javascript onApril 23, 2018

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的顺序。可以发现:

  1. DOM更新是深度优先的
  2. 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

  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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中call和apply方法浅谈
Sep 27 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 #Javascript
vue.js中实现登录控制的方法示例
Apr 23 #Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
Vue 中mixin 的用法详解
Apr 23 #Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 #Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
You might like
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python通过future处理并发问题
2017/10/17 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python-str,list,set间的转换实例
2018/06/27 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python之pymysql的使用小结
2019/07/01 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Shein英国:女性时尚网上商店
2019/04/10 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
晚会邀请函范文
2014/01/24 职场文书
报名委托书
2015/01/29 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android