再谈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 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
微信小程序之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
第九节 绑定 [9]
2006/10/09 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
jQuery入门基础知识学习指南
2015/08/14 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
发布你的Python模块详解
2016/09/15 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python调用私有属性的方法总结
2020/07/24 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
幼儿园教育教学反思
2014/01/31 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
社区志愿者活动总结
2014/06/26 职场文书
东京审判观后感
2015/06/01 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
JUnit5常用注解的使用
2021/07/02 Java/Android