$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. LeetCode43(字符串相乘)

    题目: 给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例 1: 输入: num1 = "2", ...

  2. centos7添加阿里云的epel源

    有些包在别的yum源找不到,在阿里云的yum源里成功找到,这里记录在不影响base源的情况快速添加epel源的添加方法 wget https://mirrors.aliyun.com/epel/7Se ...

  3. selenium之浏览器、元素、鼠标等操作总结

    1    控制浏览器 Selenium 主要提供的是操作页面上各种元素的方法,但它也提供了操作浏览器本身的方法,比如浏览器的大小以及浏览器后退.前进按钮等. 1.1  控制浏览器窗口大小 在不同的浏览 ...

  4. iOS开发黑科技之runtime

    iOS 开发之黑科技-runtime runtime其实就是oc底层的一套C语音的API 调用方法的本质就是发消息, 1.动态交换两个方法的实现(特别是交换系统自动的方法) 2.动态添加对象的成员变量 ...

  5. Android编程权威指南(第2版)--第16章 使用intent拍照 挑战练习

    16.7挑战练习:优化照片显示 新建dialog_photo.xml 1234567891011121314 <?xml version="1.0" encoding=&qu ...

  6. 使用BIND搭建内部DNS服务

    ​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌ ...

  7. ASP制作建议留言板

    <html>  <head>  <meta http-equiv="Content-Type" content="text/html;cha ...

  8. Elasticsearch系列---深入全文搜索

    概要 本篇介绍怎样在全文字段中搜索到最相关的文档,包含手动控制搜索的精准度,搜索条件权重控制. 手动控制搜索的精准度 搜索的两个重要维度:相关性(Relevance)和分析(Analysis). 相关 ...

  9. Think 框架漏洞利用

    下午有点闲,又没有女朋友陪,该干嘛呢??? 对了,做安全的是不需要女朋友的,哈哈哈哈哈 废话不多说,本机搭建环境: 首先nmap扫描一下,哦哈,有点东西. 开的端口有点多,这个时候有点窃喜,开的端口太 ...

  10. fsLayuiPlugin联动表格使用(一)

    简单联动表格使用 点击主表格,加载副表格数据, 演示地址:http://fslayuiplugin.fallsea.com/views/linkageDatagrid/index.html 联动表格配 ...