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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
BootstrapValidator实现表单验证功能
Nov 08 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 Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
经典洗发水广告词
2014/03/13 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
工程承包协议书范本
2014/09/29 职场文书
大学生见习报告范文
2014/11/03 职场文书
长城导游词400字
2015/01/30 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
毕业典礼主持词
2015/06/29 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang