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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
?繁体转换的class
2006/10/09 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
Python简单的制作图片验证码实例
2017/05/31 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python conda操作方法
2019/09/11 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
生产车间班组长岗位职责
2014/01/06 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
教师个人发展总结
2015/02/11 职场文书
数学教师求职信范文
2015/03/20 职场文书
小学六一主持词开场白
2015/05/28 职场文书