$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. 吴裕雄--天生自然KITTEN编程:掉金币

  2. selenium&appium中的三种等待方式---基于python

    我们在实际使用selenium或者appium时,等待下个等待定位的元素出现,特别是web端加载的过程,都需要用到等待,而等待方式的设置是保证脚本稳定有效运行的一个非常重要的手段,在selenium中 ...

  3. Vue-API之全局配置

    API 全局配置 Vue.config 是一个对象,包含 Vue 的全局配置. 源码位置:util/config.js 搜索config 可以找到其源码地址,其中声明了config的类型和默认参数 下 ...

  4. 前端模板引擎doT.js的使用

    前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示.最简单的方法就是通过jQuery去遍历数据拼接html,如以下: <script> var ...

  5. OpenFlow(OVS)下的“路由技术”

    前言 熟悉这款设备的同学,应该也快到不惑之年了吧!这应该是Cisco最古老的路由器了.上个世纪80年代至今,路由交换技术不断发展,但是在这波澜壮阔的变化之中,总有一些东西在嘈杂的机房内闪闪发光,像极了 ...

  6. html5调用摄像头功能

    前言 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多

  7. 跟我猜Spring-boot:依赖注入

    依赖注入 引&目标 本篇是<跟我猜Spring-Boot>系列的第二篇(Oh,我竟然已经写了10篇了,真不容易). 在上一篇中,我们实现了Bean的创建,但是仅仅是创建而已,并没有 ...

  8. Serializable详解(1):代码验证Java序列化与反序列化

    说明:本文为Serializable详解(1),最后两段内容在翻译上出现歧义(暂时未翻译),将在后续的Serializable(2)文中补充. 介绍:本文根据JDK英文文档翻译而成,本译文并非完全按照 ...

  9. Asp.Net Core 中IdentityServer4 授权中心之自定义授权模式

    一.前言 上一篇我分享了一篇关于 Asp.Net Core 中IdentityServer4 授权中心之应用实战 的文章,其中有不少博友给我提了问题,其中有一个博友问我的一个场景,我给他解答的还不够完 ...

  10. ggplot2(1) 简介

    1.1 简介 ggplot2是一个用来绘制统计图形(数据图形)的R软件包,与其他大多数的图形软件包不同,ggplot2是由其背后的一套图形语法所支持的.ggplot2可以绘制出很多美观度的图形,同时能 ...