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中,它是一种基于对象的存储系统,是虚拟机存…

js 控制超出字数显示省略号

//多余显示省略号 function wordlimit(cname, wordlength) {var cname document.getElementsByClassName(cname);for (var i 0; i < cname.length; i) {      var nowLength cname[i].innerHTML.length;if (nowLength > wordlength) {cname[i].innerHTML cname…

在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

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

设置状态栏和标题栏的样式

设置状态栏和标题栏的样式Android setSystemUiVisibility(visible)方法详解这个方法可以详细的设置各种标题栏的状态栏的样式.visible的值来决定1.SYSTEM_ UI_ FLAG_ LOW_ PROFILE: 影藏不重要的状态栏图标&#xff0c;导航栏中相应的图标都变成了一个小点。点击状态栏或者标题…

CMD命令硬盘/光驱挂载

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

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

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

解决Maven管理项目update Maven时,jre自动变为1.5

本文为博主原创&#xff0c;未经允许不得转载&#xff1a; 在搭建一个maven web项目时&#xff0c;项目已经按步骤搭建完好&#xff0c;之后项目上就报了一个错误。 在控制台看到错误提示如下&#xff1a;Dynamic Web Module 3.0 requires Java 1.6 or newer。。 已经改过项目中…

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…

Unbuntu 自动重启MySQL

上个月&#xff0c;通过Unbuntu搭建了WordPress&#xff0c;一切运行良好。 UBUNTU搭建WORDPRESS-MYSQL-APACHE 但是&#xff0c;最近几天&#xff0c;不知道啥情况&#xff0c;MySQL偶尔会出现Stop&#xff1b;影响了blog的使用&#xff0c;所以&#xff0c;我这里尝试了自动调…

识别Win10系统两种方法

最近写写一个工具&#xff0c;需要识别当前系统。 首先&#xff0c;找到GetVersionEx函数&#xff0c;能识别win7和win8。但win10需要修改manifested&#xff0c;才能识别&#xff0c;具体参考如下链接&#xff1a; http://blog.csdn.net/k1988/article/details/47614529 实…

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…

962-最大宽度坡

前言 Weekly Contest 116 的最大宽度坡&#xff1a; 给定一个整数数组 A&#xff0c;坡是元组 (i, j)&#xff0c;其中 i < j 且 A[i] < A[j]。这样的坡的宽度为 j - i。 找出 A 中的坡的最大宽度&#xff0c;如果不存在&#xff0c;返回 0 。 示例1&#xff1a; 输入&am…

C# 文件操作笔记

文件夹 1.存在&#xff1a; if(Directory.Exists(dirPath&#xff09; { } 2.获取文件夹内文件信息&#xff1a; DirectoryInfo di new DirectoryInfo(dirPath); foreach (FileInfo fi in di.GetFiles()) { …