AngularJS $watch 性能杀手
双向绑定是AngularJS核心概念之一,它给我们带来了思维的转变,不再是以DOM为驱动,而是以Model为核心,View中写上声明式标签(指令或{{}}),AngularJS会在后台默默同步View到Model,并将Model的变化更新到View。其虽然带来了极大好处,但是需要有一种有性能隐患的“脏检查机制”,随时观察所有绑定值的变化,如果这些需要观察的值太多,就会产生性能问题。
一、watchers函数
AngularJS利用$watch API来监控$scope上Model的变化,AngularJS应用在编译模版的时候,会收集模版上的声明式标签-指令或表达式,并链接它们,这个过程指令或表达式会注册自己的监控函数,即watchers函数。
有个AngularJS表达式{{}},其会在其所在的$scope中注册watchers函数(watch是监控mode变化,observe是监控DOM中属性变化),监控Mode中的count属性的变化,以便能更新到view。每次点击Button时候,count计数器加1,触发digest过程将变化同步到View上。这里是单向更新从Model更新到View上。如果界面上有个带有ngModel指令的input控件,View上每次输入都会被及时更新到Model上。
Model上的数据被更新到了View,背后是脏检查机制被触发,它会执行当前$scope及其所有子$scope上注册的watcher函数,如果变化了就执行相应处理函数,直到Model稳定了,如果这个过程中Model发生了变化,浏览器会重新渲染DOM来反应Model变化。
另外,AngularJS会在编译阶段手机所有指令,表达式{{}}会被解析成一种特殊的指令:addTextInterpolateDirective;在link阶段,就会利用$watch的API来注册watchers函数,所以,表达式也会成为digest循环中watchers的一员。
不仅Angular表达式,其他的指令如ngShow、ngHide和ngBind,都会通过$watch API添加watchers函数。ngBind需要一个HTML节点,并以attribute属性标记的方式。
所以,如果有太多watchers函数,那么在每次digest循环时候,肯定会慢下来,这是脏检查机制的性能瓶颈,超过2000个watchers,就会感到明显卡顿,所以,减少$watch,去掉不必要的$watch。在开发时候,尽量减少显式使用$Scope.$watch,AngularJS很多内置的指令已经满足大部分的业务需求,如ngChange,ngClick,不需要额外添加$watch。
二、one-time绑定
如果sessions有300个,那么这个循环会产生300*5+1(ngRepeat本身)个$watch,每次点击likeSession时候,会检查name,room等5个属性是否会变化,而其实这5个属性一旦绑定是不会变化的,没必要watch,这个时候可以使用one-time绑定。
AngularJS的单次绑定在1.3版本引入,单次表达式在第一次digest后,将不再计算(检测属性变化),写法是在表达式前边加个“:”前缀,如下:
三、滚屏加载
一种可行的性能解决方案,用于大量数据集显示的时候,又不想分页,所以一般放在页面底部,当滚动屏幕到达底部时候,就尝试加载一个序列的数据集,追加到底部。可以用开源组件ngInfiniteScroll。
AngularJS $watch 性能杀手的更多相关文章
- 伪共享(false sharing),并发编程无声的性能杀手
在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...
- 识别SQL Server 性能杀手
性能优化的重点在于识别定位问题,预先了解主要的性能杀手,能够更快的定位到问题并将工作集中在可能的原因之上. SQL SERVER性能杀手主要集中在如下几类: 1.1 低质量的索引 低质量的索引通常 ...
- [翻译]——SQL Server使用链接服务器的5个性能杀手
前言: 本文是对博客http://www.dbnewsfeed.com/2012/09/08/5-performance-killers-when-working-with-linked-server ...
- SQL Server中一个隐性的IO性能杀手-Forwarded record
简介 最近在一个客户那里注意到一个计数器很高(Forwarded Records/Sec),伴随着间歇性的磁盘等待队列的波动.本篇文章分享什么是forwarded record,并从原理上谈一 ...
- cpuspeed和irqbalance服务器的两大性能杀手
启用 irqbalance 服务,既可以提升性能,又可以降低能耗. irqbalance 用于优化中断分配,它会自动收集系统数据以分析使用模式,并依据系统负载状况将工作状态置于 Performance ...
- 进程上下文切换 – 残酷的性能杀手(上)(转载cppthinker.com)
对于服务器的优化,很多人都有自己的经验和见解,但就我观察,有两点常常会被人忽视 – 上下文切换 和 Cache Line同步 问题,人们往往都会习惯性地把视线集中在尽力减少内存拷贝,减少IO次数这样的 ...
- 谁是性能杀手?Kafka多Topic下启用SSL时延增大问题分析
问题背景 项目中将Kafka接口进行RESTful封装,在使用RESTful接口进行性能测试时,发现Topic数增多后,开启SSL与非SSL进行测试,发现开启SSL后性能下降得厉害.例如600个Top ...
- 并发性能的隐形杀手之伪共享(false sharing)
在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...
- Angular移除不必要的$watch之性能优化
双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Mo ...
随机推荐
- button获取验证码60秒倒计时 直接用
__block ; __block UIButton *verifybutton = _GetverificationBtn; verifybutton.enabled = NO; dispatch_ ...
- UI设计教程分享:6个不能错过的UI设计网站
Ui设计学习的人越来越多了,想要找到合适的学习资料很难,很多才接触ui设计且没有基础的同学也不知道去哪里找学习资料,虽然现在百度上很容易搜到ui设计的学习资料,但是一看不难发现,很多都是过时的学习资料 ...
- MySQL用户及权限管理
查看用户 mysql>SELECT user, host FROM mysql.user; # 检索mysql数据库中的user表 % 表示所有主机的IP 查看当前用户 mysql> se ...
- Python之socket编程进阶版
1.socket之简单的ssh功能 2.socket之简单的ftp服务器 3.socketserver的用法 4.socketserver的多并发的实现 1.socket实现ssh服务 1.1我们现在 ...
- DataTable xml 互相转换
//测试方法 public static DataTable Test() { string savePath = System.AppDomain.CurrentDomain.BaseDirecto ...
- [C#.net]WinForm载入窗体完成后自动执行事件
一.以下是网络上可搜索到的次序 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件: System.Windows.Forms.Control.Handle ...
- 各种 on事件触发js代码
[转]各种 on事件触发js代码 1.onmouseenter:当鼠标进入选区执行代码 <div style="background-color:red" onmouseen ...
- stm8 单线串口能收不能发
原因是把连接的TX和RX短接了,其实在TX和RX间要串一个电阻,然后让stm8的单线TX接到RX.
- KM匹配板子
/* gyt Live up to every day */ #include<cstdio> #include<cmath> #include<iostream> ...
- 55.UIbutton点击切换颜色
#import "ViewController.h" #define width_w [UIScreen mainScreen].bounds.size.width #de ...