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 相关文章推荐
特殊情况下如何获取span里面的值
May 20 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 Javascript
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
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
js操作二级联动实现代码
2010/07/27 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python导入坐标点的具体操作
2019/05/10 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
人力资源管理专业应届生求职信
2013/09/28 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
信息技术教学反思
2014/02/12 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
文艺委员竞选稿
2015/11/19 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js