angularjs的一些优化小技巧


Posted in Javascript onDecember 06, 2014

关于优化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很强大,但是不规范的代码也会破坏它的性能,所以在写代码之前最好构思下哪些地方是不需要监听器的.

Javascript 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JavaScript开发人员的10个关键习惯小结
Dec 05 #Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 #Javascript
node.js中实现同步操作的3种实现方法
Dec 05 #Javascript
node.js实现BigPipe详解
Dec 05 #Javascript
js实现点击添加一个input节点
Dec 05 #Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 #Javascript
浅谈js的setInterval事件
Dec 05 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
python pygame实现五子棋小游戏
2020/10/26 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python批量处理文件或文件夹
2020/07/28 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
应用数学专业求职信
2014/03/14 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
捐助感谢信
2015/01/22 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle