首先,ng-repeat的渲染是改变则渲染的。而且是无法自动检测内容是否改变的。

$scope作为一个对象,对象的特性就是两个对象是不相同的,因为我们比较的是两个对象的地址,即便两个对象的内容甚至排版完全相同,也是false;

基于此,我们只能自己来限制它无意义的渲染。

我在做一个即时聊天板块,用到的angular,期间需要轮询,所以自己搞了一些办法来提高性能。

首先,我比较了$scope中子属性的内容——$scope.names。而names是一个Array类型的。也是没办法直接比较的。此处用到数组比较的另一个方法,转字符串。看代码:

.success(function (data){
if(lianxiren != data.toString()){
lianxiren = data.toString();
$scope.names = data;
}
})

OK,很简单。如果一样,啥也不干,如果不同,先存起来,然后赋给names。

这样就完了吗?并不。

既然是即时聊天,聊个几十上百句都是毛毛雨,嗨皮了聊上几百句也是正常的。

辣么,每次都重复渲染是不是很烦?而且如果记录多了,更是耗时间。

不怕,有办法。

ng-repeat="x in names track by $index"

track by。

我们只需要给已经渲染过的条目加上一个唯一标识符就可以让angular识别出来了。而标识符的内容,我选择了$index。

其实只要是唯一的就可以,自由发挥。

angular中关于ng-repeat的性能问题的更多相关文章

  1. 在Angular中利用trackBy来提升性能

    在Angular的模板中遍历一个集合(collection)的时候你会这样写: <ul> <li *ngFor="let item of collection"& ...

  2. angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...

  3. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

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

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

  5. ui-router中的锚点问题(angular中的锚点问题)

    angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...

  6. angular中的MVVM模式

    在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...

  7. angular源码分析:angular中的依赖注入式如何实现的

    一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...

  8. 在 Angular 中实现搜索关键字高亮

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...

  9. Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing

    今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This ...

  10. angular中的服务

    angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一 ...

随机推荐

  1. Java-NestedClass(Interface).

    内部类(Nested Class) 内部类:即在一个类中还包含着另外一个类,一般是作为匿名类或者是使用数据隐藏时使用的.例子: //内部类 class Out{ private int age = 1 ...

  2. C++ _ const的用法,特别是用在函数前面与后面的区别!

    在普通的非 const成员函数中 this的类型是一个指向类类型的 const指针.可以改变this所指向的值,但不能改变 this所保存的地址. 在 const成员函数中 this的类型是一个指向 ...

  3. react native在xcode真机调试ios

    1修改URL地址:打开项目目录下的AppDelegate.m文件,修改里面的URL,把localhost改为你的电脑的IP.在Mac系统下,你可以在系统设置/网络里找到电脑的IP地址. 2选择设备:把 ...

  4. redo log日志内容备忘

    检查点是一串递增的数字. 在两个检查点之间,存在有一个MLOG_FILE_NAME的文件,里面记录着space和路径和MLOG_CHECKPOINT的一个检查点. MLOG_FILE_NAME总是在上 ...

  5. 【php】 布尔值判断

    当转换为 boolean 时,以下值被认为是 FALSE: 布尔值 FALSE 本身 整型值 0(零) 浮点型值 0.0(零) 空字符串,以及字符串 "0" 不包括任何元素的数组 ...

  6. I2C驱动框架(五)

    参考:I2C子系统之 adapter driver注册——I2C_dev_init() i2c的操作在内核中是当做字符设备来操作的,相关初始化在由i2c_dev_init函数来初始化. static ...

  7. LeetCode(95) Unique Binary Search Trees II

    题目 Given n, generate all structurally unique BST's (binary search trees) that store values 1-n. For ...

  8. SpringMVC之HandlerAdapter执行流程

    01.protected void doDispatch(HttpServletRequest request, HttpServletResponse response) throws Except ...

  9. 九度oj 题目1283:第一个只出现一次的字符

    题目描述: 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出现一次的字符. 输入: 输入有多组数据 每一组输入一个字符串. 输出: 输出第一个只出现一次的 ...

  10. 使用ANT将Android打包成Jar包

    本文主要实现使用ANT,将Android项目打包成jar,为方便其他项目使用. ANT可以去官网下载(http://ant.apache.org/) 先介绍打包的步骤,打包脚本下方贴出 步骤: 1,将 ...