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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 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
Look And Say 序列php实现代码
2011/05/22 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php中Ctype函数用法详解
2014/12/09 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python 网络编程详解及简单实例
2017/04/25 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
党员干部一句话承诺
2014/05/30 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
python入门学习关于for else的特殊特性讲解
2021/11/20 Python