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的ajax功能实现web service的json转化
Aug 29 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
javascript函数中的arguments参数
Aug 01 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
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 foreach、while性能比较
2009/10/15 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
详解Python中的测试工具
2019/06/09 Python
anaconda如何查看并管理python环境
2019/07/05 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
行政部岗位职责范本
2014/03/13 职场文书
法人代表授权委托书
2014/04/08 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014全年工作总结
2014/11/27 职场文书
高考学习决心书
2015/02/04 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers