AngularJS 整理一些优化的小技巧


Posted in Javascript onAugust 18, 2016

关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的.

ng简介

angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析.

ng的硬伤

说到硬伤就要先说下它的简单的数据绑定原理

ng里每个页面上定义的model其实都会在当前作用域下添加一个监听器,内部容器就是$$wachers数组,只要页面任何一个model发生变化了,就会触发作用域内部$digest方法,它会依次查找当前作用域树里的所有model,是保证页面上的模型能得到数据同步,所以这个是非常消耗程序时间的,官方的说法就是当页面上出现2000个监听器时,页面性能就会明显下降.所以要提高ng的性能,就要从这方面入手了.

tip1: 一次绑定

其实这个网上别人已经说过了,这里说下新的用法,ng的1.3.0+的版本已经内置提供了一个语法来支持模型只绑定一次的情况,看下面的例子

old code

hello

new code

hello

 可以看到新的语法就是在model前面加上::,相信这个语法要比网上用的第三方插件要方便的多了.

tip2: $scope.$digest vs $scope.$apply

相信很多人对$apply方法不陌生,它一般用在,当不在ng的环境里执行代码的时候,为了保证页面的数据同步,在代码执行完成之后调用$apply方法会触发内部$digest来检查作用域里所有的模型,其实在它的内部是这样调用的,下面只写出一些代码片段

...
...
$rootScope.$digest
...
...

 所有它其实是调用$rootScope根作用域下的$digest,那么不同作用域下的$digest有什么区别呢?其实最重要的区别就在于

$digest 只深度查找调用方下面所有的模型

所以$scope跟$rootScope相比,要节省掉很多查找模型的时间.

不过想要保证页面上所有模型数据的同步,还是得调用$rootScope的,所以在写代码之前最好想想哪些数据是要同步变化的.

tip3: 尽可能少调用 ng-repeat

ng-repeat默认会创建很多监听器,所以在数据量很大的时候,这个非常消耗页面性能,我觉的只有在当需要经常更新数据列表的时候才需要用ng-repeat,要不然放那么多的监听器在那里也是浪费,这时候可以用ng自带的$interpolate服务来解析一个代码片段,类似于一个静态模板引擎,它的内部主要依赖ng核心解析服务$parse,然后把这些填充数据之后的代码片段直接赋给一个一次性的模型性就可以.

tip4: 尽量在指令里写原生语法

虽然ng提供了很多的指令比如ng-show,ng-hide,其实它们作用就是根据模型的true,false来显示或隐藏一个代码片段,虽然能够很快速的实现业务要求,但是这些指令还是默认会添加监听器,假如这些代码片段存在于一个大的指令里面时,更好的方法是在指令link里编写.show(), .hide()这些类似的jq方法来控制比较好,这样可以节省监听器的数量,类似的还有自带的事件指令,这些其实都可以在外围指令里通过使用addEventListener来绑定事件,反正在写代码之前,最好想想怎么样来使监听器的数量最少,这样才能全面的提高页面性能.

tip5: 页面内尽量少用filters

当在页面内的模型后面增加filter时,这个会造成当前模型在$digest里运行两次,造成不必要的性能浪费.第一次在$$watchers检测任务改变时;第二次发生在模型值修改时,所以尽量少用内联时的过滤器语法,像下面这样的非常影响页面性能

推荐使用$filter服务来调用某个过滤器函数在后台,这样能明显的提高页面性能,代码如下

$filter('filter')(array, expression, comparator);

总结

上面都是些提高ng项目性能的一些小技巧,虽然ng很强大,但是不规范的代码也会破坏它的性能,所以在写代码之前最好构思下哪些地方是不需要监听器的.

以上就是对AngularJS 优化方面的资料整理后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
ExpressJS入门实例
Jan 14 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
js如何获取网页所有图片
May 12 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
js获取form表单所有数据的简单方法
Aug 18 #Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
php网页后退不再出现过期
2007/03/08 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php中使用GD库做验证码
2016/03/31 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python正则实现计算器功能
2017/12/14 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
Python切片操作深入详解
2018/07/27 Python
python文件写入write()的操作
2019/05/14 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
实习单位推荐信范文
2013/11/27 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
主管会计岗位责任制
2014/02/10 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
企业法人任命书
2015/09/21 职场文书
小学中队委竞选稿
2015/11/20 职场文书