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。

  

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281083.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ipad和iphone切图_如何在iPhone和iPad上的Messages App中固定对话

ipad和iphone切图Khamosh PathakKhamosh PathakBetween updates from your bank and group chats, the Messages app on your iPhone or iPad can be a mess. Use the pinned conversations feature introduced in iOS 14 and iPadOS 14 to access your favorite conversations…

这个WPF的企业级MES项目爆火,就是UI争议大!

工业4.0时代,智能智造MES系统大行其道,然而基于.NET跨平台的罕见!这里有一套《.NET6WPF企业级MES实战》教程,基于.NET6跨平台开发,实现了MES多核心功能,尤其是开发框架完整,非常适合复用。这里分…

单调栈学习笔记

线性结构——单调栈①定义:栈内的元素,按照某种方式排序(单调递增或单调递减)如果新入栈的元素破坏了单调性,就弹出栈内元素,直到满足单调性②优点:可以很方便地求出某个数左边或者右边第一个比…

《VMware Virtual SAN权威指南(原书第2版)》一1.5 什么是Virtual SAN

1.5 什么是Virtual SAN Virtual SAN是VMware推出的一种存储解决方案,它的beta版本在2013年发布,2014年3月正式开放给公众,并于2016年3月升级到6.2版。VSAN完全集成在vSphere中,它是一种基于对象的存储系统,是虚拟机存…

在Outlook 2007中查看您的Google日历

Google Calendar is a phenomenal web application for managing your calendars, but so many of us are still forced to use Outlook at work. The good thing is you can have the best of both worlds by subscribing to your Google Calendar from Outlook. Google日历是…

元宇宙、数字孪生和企业NFT

昨天参加了华为云上海开发者日活动,并客串主持了一场"元宇宙技术创新和商业实践之路"的闭门研讨会。研讨会上大家讨论热烈,干货多多,大家提到元宇宙的企业级前景、数字藏品和数字人案例的亲身体会。在会上盆盆分享了自己关于企业级…

CMD命令硬盘/光驱挂载

使用Mountvol命令挂载时,发现GUID不对啊,哪应该到哪找呢? 1.首先可以用Mountvol命令: Mountvol 创建、删除或列出卷的装入点。Mountvol 是一种不需要驱动器号而连接卷的方式。 语法: mountvol [Drive:]Path VolumeName…

纽约大街上的免费WiFi,终于铺起来了

纽约市的城市互联网项目终于开始动工了。 这个被称为 LinkNYC 的网络服务项目,是将现有的 1 万多个付费电话亭改造成提供 Wi-Fi 网络的“热点桩”,为纽约市民提供免费网络。从 12 月 28 日开始,工人们已经开始安装首批的 LinkNYC 热点桩了&am…

reddit_如何将多个子Reddit与多个Reddit合并

redditchrisdorney/Shutterstock.comchrisdorney / Shutterstock.comIf you’re subscribed to a lot of communities on Reddits, some of the content you want to see may get lost in the mix. For easier browsing, you can make your own “multireddit” that combines …

BeetleX之ServerBuilder对象使用

ServerBuilder是BeetleX新版本添加对象&#xff0c;用于进一步简化TCP服务的构建。ServerBuilder对象提供两个泛型版本&#xff1a;一个是针对网络数据流操作&#xff0c;另一个则针对协议解释器的对象处理操作。网络数据流当需要解释简单的网络数据流时使用ServerBuilder<A…

solidworks小金球_如何在没有电缆的情况下传送第77届年度金球奖

solidworks小金球Gil C / Shutterstock吉尔C / ShutterstockAs the 77th annual Golden Globes Awards approach, you may be wondering how to watch it without paying a cable bill. These streaming services are the best way to watch the awards show tonight if you cu…

2017年,这两个大数据岗位一定会火!

讨论哪个大数据岗位会火之前&#xff0c;我们先来简单的分析一下大数据领域的行情&#xff0c;这里重点说一下当前的情况。 2016年&#xff0c;互联网行业遇到了资本寒冬&#xff0c;抛开大公司不说&#xff0c;一些中小型的公司不断的缩减预算&#xff0c;因为很难融到钱。 但…

PHP7 学习笔记(十一)使用phpstudy快速配置一个虚拟主机

说明&#xff1a;为了windows本地开发php方便&#xff0c;这里推荐使用PHP集成环境phpstudy。 目的&#xff1a;使用域名访问项目&#xff08;tinywan.test&#xff09; 1、官网&#xff1a;http://www.phpstudy.net 2、虚拟主机的配置 3、站点域名管理 &#xff08;1&#xff…

.NET跨平台框架选择之一 - Avalonia UI

本文阅读目录1. Avalonia UI简介Avalonia UI文档教程&#xff1a;https://docs.avaloniaui.net/docs/getting-started随着跨平台越来越流行&#xff0c;.NET支持跨平台至今也有十几年的光景了(Mono[1]开始)。但是目前基于.NET[2]的跨平台&#xff0c;大多数还是在使用B/S架构的…

网络串流_串流NBA篮球的最便宜方式(无需电缆)

网络串流I love NBA basketball. Every year, I get really excited around the beginning of September because I know tip-off is approaching. This year, I also had to figure out how I’m going to watch the Bulls (lose almost every game) with a combination of st…

你认识的C# foreach语法糖,真的是全部吗?

本文的知识点其实由golang知名的for循环陷阱发散而来&#xff0c; 对应到我的主力语言C#&#xff0c; 其实牵涉到闭包、foreach。为了便于理解&#xff0c;我重新组织了语言&#xff0c;以倒叙结构行文。先给大家提炼出一个C#题&#xff1a;观察for、foreach闭包的差异左边输出…

C#对window 硬件类操作,ManagementObjectSearcher

原文转载&#xff1a;http://blog.csdn.net/da_keng/article/details/50589145 纯属转载&#xff0c;复制过来方便编程时寻找。感谢作者&#xff1a;I-Awakening复制前补充&#xff1a; 在刚学C#&#xff0c;用ManagementObjectSearcher 竟然不能解析到头文件&#xff0c;需要手…

twitter批量取消关注_如何在Twitter上取消阻止“潜在敏感内容”

twitter批量取消关注Twitter推特Twitter blocks some tweets with a “potentially sensitive content” warning. You can disable this warning—even on an iPhone or iPad, where the option isn’t normally available. You can also disable sensitive content warnings …

Semantic-UI的React实现(二):CSS类构造模块

更简单的类名标签 Semantic-UI使用了更简单的类名声明。用过Bootstrap的同学都会被其复杂的类名标签折磨过&#xff0c;例如一个简单的按键样式&#xff0c;不论颜色或是大小&#xff0c;都需要btn-前缀声明&#xff1a; <button type"button" class"btn btn…

skype自动回复_如何在Windows 10上阻止Skype自动启动

skype自动回复Microsoft微软The Skype app included with Windows 10 now has a notification area icon. That’s great, but what if you never use Skype and don’t want it starting every time you sign in? Here’s how to get rid of it. Windows 10随附的Skype应用程…