$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. python 内置方法、数据序列化

    abc(*args, **kwargs) 取绝对值 def add(a,b,f): return f(a)+f(b) res = add(3,-6,abs) print(res) all(*args, ...

  2. 吴裕雄--天生自然 PYTHON数据分析:威斯康星乳腺癌(诊断)数据分析(续一)

    drop_list1 = ['perimeter_mean','radius_mean','compactness_mean','concave points_mean','radius_se','p ...

  3. LeetCode Problem 90. Subsets II

    python solution 123456789101112131415161718192021222324252627 class (object): def subsetsWithDup(sel ...

  4. RocketMQ borker配置文件

    master节点:serverSelectorThreads = 3 brokerRole = SYNC_MASTER serverSocketRcvBufSize = 131072 osPageCa ...

  5. android-interview

    如何减小安装包的大小 主要是减小资源的大小 不常使用的资源,使用时再从网络下载. 绘制代替图片资源 OOM (Out Of Memory) https://www.zhihu.com/question ...

  6. PHP实现读取一个1G的文件大小

    需求如下: 现有一个1G左右的日志文件,大约有500多万行, 用php返回最后几行的内容. 1. 直接采用file函数来操作 or file_get_content() 肯定报内存溢出注: 由于 fi ...

  7. USB小白学习之路(6) IIC EEPROM读取解析

    IIC EEPROM读取解析 1. 编译错误处理(这里可以忽略) 在解压包解压了程序后,直接编译,出现如下错误. *** WARNING L14: INCOMPATIBLE MEMORY MODEL ...

  8. EventEmitter:从命令式 JavaScript class 到声明函数式的华丽转身

    新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式. 灵活的 JavaScript 及其 multiparadigm 相信"函数式&quo ...

  9. 学h5前端开发前必知的三大流行趋势

    学h5前端开发前必知的三大流行趋势 随着互联网时代的飞速发展,各种互联网的Web应用程序层出不穷,很多人对于HTML5前端开发的过程充满了好奇,但是却没有了解到前端开发的未来发展趋势.下面,云慧学院专 ...

  10. 基础JavaScript练习(二)总结

    任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过 ...