angularjs的一些优化小技巧  更新时间:2014年12月06日 10:05:02   投稿:junjie   这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下 关于优化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教程:关于if简写语句优化的方法 js中if语句的几种优化代码写法 nodejs的10个性能优化技巧 JavaScript性能优化之小知识总结 js性能优化 如何更快速加载你的JavaScript页面 JavaScript也谈内存优化 JavaScript定时器和优化的取消定时器方法 JS对img标签进行优化使用onerror显示默认图像 Uglifyjs(JS代码优化工具)入门 安装使用 深入探究JavaScript中for循环的效率问题及相关优化 js 优化次数过多的循环 考虑到性能问题 javascript for循环从入门到偏门(效率优化+奇特用法) 整理AngularJS框架使用过程当中的一些性能优化要点 javascript定时器取消定时器及优化方法 JavaScript中对循环语句的优化技巧深入探讨 JS代码优化技巧之通俗版(减少js体积) Extjs优化(二)Form表单提交通用实现 JS代码优化的8点建议 angularjs 优化 小技巧 相关文章 angular2路由之routerLinkActive指令【推荐】 这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下 2018-05-05 angularJs中datatable实现代码 本篇文章主要介绍了angularJs中datatable实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 浅谈angularJS2中的界面跳转方法 今天小编就为大家分享一篇浅谈angularJS2中的界面跳转方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 详解Angular组件生命周期(一) 每个Angular版本在其生命周期中都经历了各个阶段。组件在Angular中起着关键作用; 在这里,本文将讨论Angular中的组件生命周期以及它们如何影响框架所有版本的生命周期。 2021-05-05 AngularJS中$http服务常用的应用及参数 大家都知道,AngularJS中的$http有很多参数和调用方法,所以本文只记录了比较常用的应用及参数,方便大家以后使用的时候参考学习,下面一起来看看吧。 2016-08-08 AngularJS 面试题集锦 本文主要介绍AngularJS的面试题资料整理,这里整理了相关面试题的资料,帮助大家学习理解AngularJS的知识,有兴趣的小伙伴可以参考下 2016-09-09 Angular之toDoList的实现代码示例 本篇文章主要介绍了Angular之toDoList的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-12-12 AngularJS入门教程之双向绑定详解 本文主要介绍AngularJS 双向绑定,这里整理了详细的知识资料并讲解,而且附有代码示例,有兴趣的小伙伴可以参考下 2016-08-08 Angularjs实现搜索关键字高亮显示效果 本篇文章主要介绍了Angularjs实现搜索关键字高亮显示的方法,具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 AngularJS+Node.js实现在线聊天室 随着互联网和信息技术的发展,如何快速构建高效、强大的动态网站成为很多人研究的热点。该文将结合AngularJS和Node.js构建一个在线聊天室,体现AngularJs和Node.js整合的优点。 2015-08-08 最新评论

关于优化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教程:关于if简写语句优化的方法
  • js中if语句的几种优化代码写法
  • nodejs的10个性能优化技巧
  • JavaScript性能优化之小知识总结
  • js性能优化 如何更快速加载你的JavaScript页面
  • JavaScript也谈内存优化
  • JavaScript定时器和优化的取消定时器方法
  • JS对img标签进行优化使用onerror显示默认图像
  • Uglifyjs(JS代码优化工具)入门 安装使用
  • 深入探究JavaScript中for循环的效率问题及相关优化
  • js 优化次数过多的循环 考虑到性能问题
  • javascript for循环从入门到偏门(效率优化+奇特用法)
  • 整理AngularJS框架使用过程当中的一些性能优化要点
  • javascript定时器取消定时器及优化方法
  • JavaScript中对循环语句的优化技巧深入探讨
  • JS代码优化技巧之通俗版(减少js体积)
  • Extjs优化(二)Form表单提交通用实现
  • JS代码优化的8点建议
张贴在3