双向绑定是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。

  

转载于:https://www.cnblogs.com/shawnhu/p/8522072.html

AngularJS $watch 性能杀手相关推荐

  1. 伪共享(false sharing),并发编程无声的性能杀手

    在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能异步处理框架 Disruptor ...

  2. Web 仿 App 动画竟然引出了“性能杀手”

    本文作者:杨晔 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 ( id: yuewen_YFE ) 获取授权,并注明作者.出处和链接. 背景 在我参与开发的对话小说项目 ...

  3. jsf tree组件_JSF:在传统组件和时尚性能杀手之间进行选择

    jsf tree组件 这篇博客文章起源于一个大型Web应用程序中的性能问题. 每个人都优化Java代码,但似乎没有人尝试优化JavaScript代码. 奇怪,因为在客户端有很多改进的空间. 我会说,甚 ...

  4. JSF:在传统组件和时尚性能杀手之间进行选择

    这篇博客文章起源于一个大型Web应用程序中的性能问题. 每个人都优化Java代码,但似乎没有人尝试优化JavaScript代码. 奇怪,因为在客户端有很多改进的空间. 我会说,甚至比服务器端还要多. ...

  5. 伪共享,并发编程无声的性能杀手

    伪共享,并发编程无声的性能杀手 在并发编程过程中,我们大部分的焦点都放在如何控制共享变量的访问控制上(代码层面),但是很少人会关注系统硬件及 JVM 底层相关的影响因素.前段时间学习了一个牛X的高性能 ...

  6. 预编译sql查询语句_频繁查询重新编译– SQL查询性能杀手–检测

    预编译sql查询语句 previous part of this article, we presented query recompilation basics. We explained when ...

  7. SQL Server中一个隐性的IO性能杀手-Forwarded record

    简介 最近在一个客户那里注意到一个计数器很高(Forwarded Records/Sec),伴随着间歇性的磁盘等待队列的波动.本篇文章分享什么是forwarded record,并从原理上谈一谈为什么 ...

  8. 小心NLS_SORT和NLS_COMP的设置成为性能杀手

    NLS_SORT和NLS_COMP是Oracle两个初始化参数.顾名思义,NLS_SORT和NLS_COMP是设置排序和比较的方式.通过设置这两个参数可以实现自定义的排序和比较的方式.设置这两个参数的 ...

  9. 伪共享问题-并发编程无声的性能杀手

    本文以LongAdder源码为例进行说明.关于原子累加器的论述可以参考文章:原子累加器LongAdder与AtomicLong 1.LongAdder部分源码 2.多核机器的存储结构 CPU为了提升性 ...

最新文章

  1. centos 7 ssh 安装mysql,Centos 7 安装Airflow
  2. C语言 数字翻转输出
  3. 方法描述Mybatis使用之NEIS项目
  4. django默认缓存是多大_Django之缓存 - osc_fd8vzgsi的个人空间 - OSCHINA - 中文开源技术交流社区...
  5. 我心中的核心组件(可插拔的AOP)~大话开篇及目录
  6. 又真香了!到底是怎样的软件测试面试文档,拿到这么多大厂offer
  7. LR之Java Vuser
  8. IMG镜像写盘工具physdiskwrite,用于MikroTik RouterOS的安装(Windows)
  9. 项目配置多Redis数据源(Redis分片)
  10. 企业间数据竞争规则研究
  11. html640设计稿,为什么写移动端的ui给的640设计稿的宽度,在写html的时候要除以2才正好。...
  12. JQuery常见命令查找网站
  13. PHP文件怎么改tne,修改 · thinkphp6文档 · 看云
  14. 麒麟V10服务器SP2版本离线安装MYSQL8.0
  15. Java链表(基本操作)
  16. C盘存储空间不够?拓展C盘空间的方法
  17. 计算机读不了硬盘分区,电脑开机后读不到硬盘怎么办
  18. android获取手机sim卡信息,Android获取手机SIM卡运营商信息的方法
  19. 从文化地理看三国演义
  20. 计算数的三次方根(Java)

热门文章

  1. php中解析数组,在PHP中解析多维数组
  2. c语言编写贪吃蛇代码无错,刚学C语言,想写一个贪吃蛇的代码
  3. Dubbo的RPC原理
  4. Java8对List<Integer>的求和
  5. catia如何整列加工_”模具加工“最全面的诠释,你真的都懂了吗?
  6. 15 张图,了解一下 TCP/IP 必知也必会的 10个要点
  7. 计算机系统基础:计算机可靠性知识笔记
  8. 【数据库】13种会导致索引失效语句写法
  9. Windows系统优化12个默认设置
  10. 职坐标 MySQL视频_测试工具之MySQLSlap使用实例