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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
javascript跨域的4种方法和原理详解
Apr 08 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
用vue设计一个日历表
Dec 03 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
小程序实现文字循环滚动动画
Jun 14 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
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
Ref与out有什么不同
2012/11/24 面试题
运动会解说词50字
2014/01/18 职场文书
个人股份合作协议书
2014/10/24 职场文书
新郎接新娘保证书
2015/05/08 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
试了下Golang实现try catch的方法
2021/07/01 Golang
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL