angular中关于ng-repeat的性能问题
首先,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的性能问题的更多相关文章
- 在Angular中利用trackBy来提升性能
在Angular的模板中遍历一个集合(collection)的时候你会这样写: <ul> <li *ngFor="let item of collection"& ...
- angular中$cacheFactory缓存的使用
最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- angular源码分析:angular中脏活累活承担者之$parse
我们在上一期中讲 $rootscope时,看到$rootscope是依赖$prase,其实不止是$rootscope,翻看angular的源码随便翻翻就可以发现很多地方是依赖于$parse的.而$pa ...
- ui-router中的锚点问题(angular中的锚点问题)
angular.module('anchorScrollExample', []) .controller('ScrollController', ['$scope', '$location', '$ ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- angular源码分析:angular中的依赖注入式如何实现的
一.准备 angular的源码一份,我这里使用的是v1.4.7.源码的获取,请参考我另一篇博文:angular源码分析:angular源代码的获取与编译环境安装 二.什么是依赖注入 据我所知,依赖注入 ...
- 在 Angular 中实现搜索关键字高亮
在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数 ...
- 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 ...
- angular中的服务
angular中的服务 angular中的服务相当于一个状态管理,可以将数据放在服务里面进行获取以及编辑. 服务的安装命令: ng g service count 安装好后,会在服务的ts文件中引入一 ...
随机推荐
- history 路由且带二级目录的Apache配置
有多个项目目录的时候 由于项目不知一个,所以不得不为每一个项目建一个专有的文件夹,这就导致了在配置nginx的时候会出现二级目录 - step1: 修改 vue.config.js 添加配置 ...
- v-if与v-show的区别与选择
v-if与v-show的区别与选择 官网给的区别 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if也是惰性的:如果在初始渲染时条件 ...
- 快学UIautomator之uiautomatorhelp使用
1.先下载uiautomatorhelp插件 2.把uiautomatorhelp.java包放到自己的项目中 3.项目中引入uiautomatorhelp插件 4.在项目中设置一个main方法,引入 ...
- nyoj-1103-区域赛系列一多边形划分
http://acm.nyist.net/JudgeOnline/problem.php?pid=1103 区域赛系列一多边形划分 时间限制:1000 ms | 内存限制:65535 KB 难度: ...
- python暴力破解wifi密码程序
import time # 破解wifi库 import pywifi from pywifi import const class PoJie(object): def __init__(self, ...
- Bootstrap历练实例:基本输入框组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- MacBook Pro休眠掉电、耗电量大问题解决方案
1.前言 最近我的2015mbpMacBook Pro (Retina, 13-inch, early 2015)更新完10.14系统后,发现休眠待机一晚上后能掉5%电,白天待机4-5小时又掉了8%. ...
- pssh批量管理服务器
pssh命令是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,类似pdsh,个人认为相对pdsh更为简便,使用必须在各个服务器上配置好密钥认证访问. 1. ...
- 使用Lucene的java api 写入和读取索引库
import org.apache.commons.io.FileUtils;import org.apache.lucene.analysis.standard.StandardAnalyzer;i ...
- Ubuntu 清理卸载残留文件
dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P