$watch 的实现原理和性能分析

  • 只有双向绑定的 scope 才会被加入$watch队列,或者手动绑定$watch$scope
  • 所有放在 $scope 中的变量或函数都被加入到了$watch队列当中,每次只要$scope中的一个变量的值发生变化,Angular就会自动调用$apply或者$digest来把所有在$watch队列中的变量或函数都执行一遍,然后把当前值和上一次的值就行比较,如果有变化,就会在执行一遍(一直循环,最多11次),知道没有变化就会停止
  • 任何事件如果调用Angular的context中的函数之后,都会对$watch队列进行对比执行,不管有没有对$scope进行改变,

例如:ng-click 执行了一个函数 $scope.say = function(){ \nothing }, 在这个函数里面没有任何操作,但还是会执行$watch队列

ng-repeat 的原理和性能问题

  • ng-repeat循环中的每一个item都会建立一个单独的scope并对每个scope中的model进行$watch.
  • 这样的话如果有200条数据,每条数据中5个属性要被$watch, 那么就是 200 * 5次,又因为每次脏数据检测至少都需要执行两次来保证所有变化都被应用,那么就是 200 * 5 * 2, 在加上单独的 ng-repeat一个和其他的modeln个,就是 200 * 5 * 2 + 1 + n, 如果这个数据超过2500的话页面就会变得很慢了
  • 所以如果ng-repeat的数据只是用来展示不需要对其进行操作的话就可以取消$watch绑定,可以使用一个Angular的第三方directive: Bindonce.

angular的性能分析 -随记的更多相关文章

  1. 记一次docker问题定位(perf,iostat等性能分析)

    背景 最近参与的项目是基于 OpenStack 提供容器管理能力,丰富公司 IaaS 平台的能力.日常主要工作就是在开源的 novadocker 项目(开源社区已停止开发)基础上进行增强,与公司的其他 ...

  2. angular源码分析:angular中脏活累活承担者之$parse

    我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...

  3. 转 Linux日志文件系统及性能分析

    日志文件系统可以在系统发生断电或者其它系统故障时保证整体数据的完整性,Linux是目前支持日志文件系统最多的操作系统之一,本文重点研究了Linux常用的日志文件系统:EXT3.ReiserFS.XFS ...

  4. ------ 新春第一炮:阶乘算法性能分析与 double fault 蓝屏故障排查 Part I ------

    -------------------------------------------------------------------------- 春节期间闲来无事想研究下算法,上机测试代码却遇到了 ...

  5. ABP给WebApi添加性能分析组件Miniprofiler

    在ABP的WebApi中,对其性能进行分析监测是很有必要的.而悲剧的是,MVC项目中可以使用的MiniProfiler或Glimpse等,这些都不支持WebApi项目,而且WebApi项目通常也没有界 ...

  6. MySQL性能分析(转)

    第一步:检查系统的状态 通过操作系统的一些工具检查系统的状态,比如CPU.内存.交换.磁盘的利用率.IO.网络,根据经验或与系统正常时的状态相比对,有时系统表面上看起来看空闲,这也可能不是一个正常的状 ...

  7. [Oracle]关于Oracle分页写法的性能分析及ROWNUM说明

    关于分页写法的性能分析及ROWNUM的补充说明 分页写法 一.测试前数据准备 SQL> SELECT COUNT(*) FROM BPM_PROCVAR; COUNT(*) ---------- ...

  8. linux系统——日志文件系统及性能分析

    Linux日志文件系统及性能分析 日志文件系统可以在系统发生断电或者其它系统故障时保证整体数据的完整性,Linux是目前支持日志文件系统最多的操作系统之一,本文重点研究了Linux常用的日志文件系统: ...

  9. MySQL索引性能分析

    为什么要做性能分析 你有没有这样的情况. 面对一个你没怎么写过的.复杂的业务,你构思了很久,终于开始敲下了第一段代码. 写的过程迷迷糊糊,有的时候还能把自己搞晕了. 但你还是终于把它写完了. 但是点击 ...

随机推荐

  1. numpy array 分割

    import numpy as np A = np.array([1,1,1])[:,np.newaxis] B = np.array([2,2,2])[:,np.newaxis] #合并 C = n ...

  2. 29.eval函数

    eval 函数 eval() 函数十分强大 -- 将字符串 当成 有效的表达式 来求值 并 返回计算结果 123456789101112131415 # 基本的数学计算In [1]: eval(&qu ...

  3. Redis过期key淘汰策略

    Redis采用惰性+定期的key淘汰策略 1. Redis配置项hz定义了serverCron任务的执行周期,默认为10,即CPU空闲时每秒执行10次; 2. 每次过期key清理的时间不超过CPU时间 ...

  4. useful_tool

    记录工作学习中遇到的经典好用的工具软件. 工作篇 AxeSlide斧子演示 AxeSlide是PPT的良好替代品,跨平台,基于Html5 2D/3D技术开发.动画特效等效果十分不错.工具提供很多免费模 ...

  5. Eclipse如何打开Android工程

    一.Eclipse如何打开Android工程 1.你可以在file->new->other->android object选择选项:create object from exists ...

  6. iOS Swift 开发语言之初接触,纯代码创建UIView,UITableView,UICollectionView

    1. 初始化Label设置AttributeString override func viewDidLoad() { let label = UILabel(frame:CGRect(x:,y:,wi ...

  7. createjs的compositeOperation在Android和IOS上接受的参数居然不一样

    例如 目标.compositeOperation = 如果是安卓? "darken" : "darker";

  8. webpack从0到1超详细超基础学习教程

    概念 自己是一个一听到webpack就头大,看着一堆不知道那是什么玩意的东西总觉得自己做好前端就行了,但是在使用vue-cli的时候总觉得要改其中的一些东西进行项目初始化的时候能够更好使用!所以想要根 ...

  9. sass片段

    变量: $color: #333; body { color: $color;} -----> body { color: #333; } 嵌套: nav { ul { margin: 0; } ...

  10. sf-git机制

    为什么要专门写一篇关于sf科技公司的GIT管理机制呢?因为本周经历了两天的学习和考试,刚开始没在意,因为之前公司也用的GIT,所以没怎么看视频,就看了文档,练习考试时候才发现并非以前的那种git流程, ...