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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
input 高级限制级用法
2009/03/26 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
专业技术职务聘任书
2014/03/29 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
政协会议宣传标语
2014/10/09 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
大学同学聚会感言
2015/07/30 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python