angularjs性能优化的方法


Posted in Javascript onSeptember 05, 2018

学习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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
js构造函数创建对象是否加new问题
Jan 22 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
在vue中给列表中的奇数行添加class的实现方法
Sep 05 #Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 #Javascript
浅谈vue 单文件探索
Sep 05 #Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 #Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
vue中动态添加class类名的方法
Sep 05 #Javascript
You might like
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php获取系统变量方法小结
2015/05/29 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
零基础php编程好学吗
2019/10/11 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
jquery插件实现轮播图效果
2020/10/19 jQuery
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python装饰器用法实例总结
2018/02/07 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
岗位职责怎么写
2014/03/14 职场文书
工程项目经理任命书
2014/06/05 职场文书
学校创先争优活动总结
2014/08/28 职场文书
爱心捐款活动总结
2015/05/09 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python