angularjs性能优化的方法

学习angularjs有一段时间了，但是一直都没有怎么考虑过性能方面的问题，上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。

优化$watch

1.及时移除不必要的watch

var unWatch = $scope.$watch('', function() {
  // do something
  ...
  if (someCondition) {
    unWatch();  // 取消监听
  }
});

2.尽量避免深度watch

我们都知道$watch有三个参数，第三个参数为true就是要深度监听的。这个参数主要是在嵌套对象的时候会用到，但是要尽量避免使用，如果你只是想看看基本属性的变化，那么就不要使用第三个参数进行深度的监听，这回大大拖慢每一次监听的时间。

3.ng-if和ng-show

尽量使用ng-if，因为前者不仅会移除DOM，还会移除相应的watch。

而ng-show只是简单的隐藏，但其实已经加载完成。

ng-show指令在特定的元素上切换CSS显示属性，而ng-if指令实际上会先从DOM中删除元素，如果在需要的话重新创建。此外，ng-switch指令是ng-if的替代方案，具有相同性能优势。

$apply和$digest

$apply会使angular进入$digest循环，然后从$rootScope开始遍历，检查变更。

$digest只会检查当前scope以及其子scope。

所以，但我们确定某个操作只会影响当前的scope，使用$digest会稍微提升性能。

优化ng-repeat

ng-repeat真是使用比较多的指令了，但是好像经常忽略track by。

建议避免在JavaScript中使用ng-repeat来构建HTML。对于某些应用程序来说，使用ng-repeat会增加不必要的监视者。使用ng-bind-html指令是解决这个问题的更好的办法。

我们的ng-repeat经常就这么写：

ng-repeat="item in items"

但是如果这么写的话，当我们刷新页面的时候，它会删除所有已有的DOM，然后重新创建和渲染。但是如果我们加上track by就不同了：

ng-repeat="item in item track by item.id"

这样angular就会复用已有的DOM，然后更新变化的部分。这就减少了不必要的渲染。

使用$watchCollection（包括第三个参数）

通常在使用$watch的时候只会用到两个参数，但是如果加上第三个参数的话，例如`$watch('value',function(){},true)`，则可以让Angular执行深度检查（检查对象的每个属性）。但这可能会带来更多的性能开销。因此，为了解决这个性能问题，Angular提供了`$watchCollection('value', function(){})`，它的第三个参数的功能与$watch的几乎相同，只是它只检查对象属性的第一层，以降低性能开销。

使用console.time来调试问题

如果你在对应用程序努力地进行调试，以解决性能问题的话，请使用console.time，这是一个非常棒的API。

去抖ng-model

你可以使用ng-model来去除输入。例如，要撤销像GOOGLE这样的搜索输入的话，你必须使用ng-model-options=”{debounce:250}”。由于输入模型发生了变化，使得digest cycle每250ms触发不超过一次。

其他优化

console.log很耗时，发布的时候一定要干掉。

慎用filter，可以在controller中预先处理。

尽量避免使用广播事件，可以使用双向数据绑定或者共享service等方法代替。

总结

我总结的还不是很全，都只是我常用到的。随着更多的使用，理解也会更进一步的加深。

参考：https://github.com/atian25/blog/issues/5

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 整理AngularJS框架使用过程当中的一些性能优化要点

    整理AngularJS框架使用过程当中的一些性能优化要点

    1. 简介 无论你正在编写一个旧的应用程序还是在一个大型应用中采用AngularJS,性能是一个重要的方面.了解是什么原因导致AngularJS应用程序慢下来非常重要,要知道,在开发过程中做出权衡是很重要的.本文将介绍一些AngularJS比较常见的性能问题,以及优化的建议. 2. 性能测试工具 本文采用jsPerf http://jsperf.com/ 性能测试的基准. 3. 软件性能 评价软件性能有两个基本的因素: 首先是算法的时间复杂度.一个简单的例子就是线性搜索和二分检索有着非常显著的性

  • 再谈Angular4 脏值检测(性能优化)

    Summary Angular 4的脏值检测是个老话题了,而理解这个模型是做Angular性能优化的基础.因此,今天我们再来聊聊Angular 4脏值检测的原理,并看看性能优化的小提示. 进入点 - Zone.js Angular 4是一个MVVM框架.数据模型(Model)转换成视图模型(ViewModel)后,绑定到视图(View)上渲染成肉眼可见的页面.因此,发现数据模型变化的时间点是更新页面的关键,也是调用脏值检测的关键. 经过分析,工程师们发现,数据的变化往往由macrotask和mi

  • angularjs性能优化的方法

    学习angularjs有一段时间了,但是一直都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题.所以自己也总结了下常用的性能优化. 优化$watch 1.及时移除不必要的watch var unWatch = $scope.$watch('', function() { // do something ... if (someCondition) { unWatch(); // 取消监听 } }); 2.尽量避免深度watch 我们都知道$watch有三个参数,第三个参数为t

  • Vue性能优化的方法

    今天来谈一谈Vue中一些性能优化的问题,仅仅是个人使用中的一些小心得,来,今天我一句废话不多说,直接上内容好吧 1.v-if和v-show的使用, 我们都知道这两个都可以控制显隐,那我们用哪个呢,个人觉得要从两个方面入手来确定使用哪个, 1.权限的问题,只要涉及到权限相关的展示用v-if比较好 2.切换地频率,如果频繁的切换我们用v-show,不频繁的切换用v-if 其实两者各有优缺,就看你是怎么选择了,用v-if能减少页面中的DOM总数,加快渲染的速度,而且我们要清楚一个事情 v-if是'真正

  • .NET使用Collections.Pooled提升性能优化的方法

    .NET使用Collections.Pooled提升性能优化的方法

    目录 简介 Collections.Pooled 如何使用 性能对比 PooledList<T> PooledDictionary<TKey, TValue> PooledSet<T> PooledStack<T> PooledQueue<T> 未手动释放场景 原理解析 总结 简介 性能优化就是如何在保证处理相同数量的请求情况下占用更少的资源,而这个资源一般就是CPU或者内存,当然还有操作系统IO句柄.网络流量.磁盘占用等等.但是绝大多数时候,我

  • 浅谈react性能优化的方法

    React性能优化思路 软件的性能优化思路就像生活中去看病,大致是这样的: 使用工具来分析性能瓶颈(找病根) 尝试使用优化技巧解决这些问题(服药) 使用工具测试性能是否确实有提升(疗效确认) 初识react只是为了尽快完成项目,后期进行代码审查时候发现有很多地方需要优化,因此做了个小结. Code Splitting shouldComponentUpdate避免重复渲染 使用不可突变数据结构 组件尽可能的进行拆分.解耦 列表类组件优化 bind函数优化 不要滥用props ReactDOMSe

  • JS性能优化实现方法及优点进行

    最近刚阅读完<高性能javascript>,想谈谈对js性能优化的看法.理解有些不同,可能还需要各位多多提醒. 话不多说,提到javascript难免会联想到文档对象模型(DOM),它作用于XML和HTML文档的程序接口(API),位于浏览器中,主要用来与HTML文档打交道.同样也用于Web程序中获取XML文档,并使用DOM API来访问文档中的数据.尽管DOM是个与语言无关的API,它在浏览器中的接口却是用javascript实现的.客户端脚本编程大多数时候是在和底层文档(underlyin

  • 小程序多图列表实现性能优化的方法步骤

    写这篇文章的缘由: 最近在公司的小程序项目中遇到了页面图片元素过多导致的性能问题. 从小程序提供的性能检测面板分析, 确定是图片元素占用了过多内存导致. 因为本人之前主要是做桌面端应用开发和原生app开发, 没有太顾及过移动端图片的内存占用问题. 这次既然遇到了, 也就趁这个机会学习一下其优化的技巧. 什么造成的性能问题 简单的来说: DOM节点过多 && 图片节点过多 DOM节点过多会造成更多的内存占用. 按照目前的微信小程序限制, 内存占用500M以上会出现卡顿, 甚至闪退. 如果列表

  • 50个PHP程序性能优化的方法

    1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为 PHP 会在双引号包围的 字符串中搜寻变量,单引号则不会,注意:只有 echo 能这么做,它是一种可以把多个字符 串当作参数的"函数"(译注:PHP 手册中说 echo 是语言结构,不是真正的函数,故把函数 加上了双引号). 2.如果能将类的方法定义成 static,就尽量定义成 static,它的速度会提升将近 4 倍. 3.$row['id'] 的速度是$row[id]的 7 倍. 4.echo 比 print 快,并且

  • 9种改善AngularJS性能的方法

    9种改善AngularJS性能的方法

    AngularJS 是目前使用非常广泛的 web app 应用框架,随着它的受欢迎程度持续上升 ,期待已久的AngularJS 4.0 诞生了.尽管已经做了很多优化,但几乎每个 Angular 专家仍然在处理使用 AngularJS 中出现的各种各样的问题. 目前,企业使用Web技术用在他们各自项目上,在线业务因此受到了极大影响.因此,有必要深入挖掘影响企业成长的各种因素. 但是,有可能不正确地使用 AngularJS 方法会影响你的应用程序在市场上的排名,因此 AngularJS 性能优化成为

  • Android性能优化方法

    GPU过度绘制 •打开开发者选型,"调试GPU过度绘制",蓝.绿.粉红.红,过度绘制依次加深  •粉红色尽量优化,界面尽量保持蓝绿颜色  •红色肯定是有问题的,不能忍受 使用HierarchyView分析布局层级 •删除多个全屏背景:应用中不可见的背景,将其删除掉  •优化ImageView:对于先绘制了一个背景,然后在其上绘制了图片的,9-patch格式的背景图中间拉伸部分设置为透明的,Android 2D渲染引擎会优化9-patch图中的透明像素.这个简单的修改可以消除头像上的过度

  • Laravel网站打开速度优化的方法汇总

    Laravel网站打开速度优化的方法汇总

    前言 Laravel是一个功能强大的框架,组件很多,代码也很庞大,它的易用方便是牺牲了性能的,即便如此它仍然是一个优秀的框架,但在正式环境下要做好优化提升网站的打开速度.下面这篇文章主要给大家介绍了关于Laravel网站打开速度优化的一些方法技巧,下面话不多说,来一起看看详细的介绍: 一.关闭debug 打开.env文件,把debug设置为false. APP_ENV=local APP_DEBUG=false APP_KEY=base64:sT/aTFeaE13eyao1Raee6jC9Ff+

随机推荐