angularjs的一些优化小技巧

关于优化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很强大,但是不规范的代码也会破坏它的性能,所以在写代码之前最好构思下哪些地方是不需要监听器的.

赞 (0)

相关推荐

  • AngularJS 遇到的小坑与技巧小结

    1. templateURL和路由之类的要在web server下运行. 2. 使用模板replace设为true,模板里也要有相应的标签,否则不出现任何数据. 3. 1.2版本之后,ngRoute模块独立. 4.空的controller不定义会出错. 5.Directive的link参数是有顺序的:scope,element,attrs,ctrl 6.ng-repeat不能循环重复的对象.hack: ng-repeat="thing in things track by $id($index)

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • AngularJS实用开发技巧(推荐)

    AngularJS实用开发技巧(推荐)

    一.开端 Angular JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与jQuery 配合良好. 二.基础原则了解 ①angular的一些入门了解 一.基础知识 1.angular放弃了IE8 2.四大核心分别是mvc.模块化.指令系统.双向数据绑定 二.一些原则 1.不要复用controller,一个控制器一般只负责一小块视图. 2.不要在controller里面操作

  • AngularJS 整理一些优化的小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • Angular 应用技巧总结

    angular的核心思想是通过数据驱动一切,其他东西都是数据的延伸. 套用Javascript一切皆对象的思想,在angular中可以说一切皆数据.   关于项目构建     (1) requirejs以及Yeoman 在刚开始接触或者使用Angular的时候,总会疑惑与类似的问题,我实践的答案是不需要requirejs或者Yeoman.前者不使用,因为angular本身有module的实现.后者是因为Angular组织结构以及项目构建完全不必要弄得如此繁杂,手写或者在github上pull一个

  • angularjs的一些优化小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • mysql优化小技巧之去除重复项实现方法分析【百万级数据】

    mysql优化小技巧之去除重复项实现方法分析【百万级数据】

    本文实例讲述了mysql优化小技巧之去除重复项实现方法.分享给大家供大家参考,具体如下: 说到这个去重,脑仁不禁得一疼,尤其是出具量比较大的时候.毕竟咱不是专业的DB,所以嘞,只能自己弄一下适合自己去重方法了. 首先按照常规首段,使用having函数检查重复项,完事一个一个的删除.不要问我having检测重复项的sql咋写,你懂得哈...这个在只有几条重复的时候还可以.要是几千上万条不同数据重复,那咋办... 完事呢,咱就考虑了,用having函数查询的时候,原始sql如下: select `n

  • 分享12个Vue开发中的性能优化小技巧(实用!)

    分享12个Vue开发中的性能优化小技巧(实用!)

    目录 前言 1.长列表性能优化 1.不做响应式 2.虚拟滚动 2.v-for遍历避免同时使用v-if 3.列表使用唯一key 4.使用v-show复用DOM 5.无状态的组件用函数式组件 6.子组件分割 7.变量本地化 8.第三方插件按需引入 9.路由懒加载 10.keep-alive缓存页面 11.事件的销毁 12.图片懒加载 总结 前言 性能优化,是每一个开发者都会遇到的问题,特别是现在越来越重视体验,以及竞争越来越激烈的环境下,对于我们开发者来说,只完成迭代,把功能做好是远远不够的,最重要

  • 8个JavaScript条件语句优化小技巧分享

    8个JavaScript条件语句优化小技巧分享

    目录 1.Array.includes 2.Array.every 3.尽早 return 4.三元运算符 5.switch...case 6.Map/Object 7.默认函数参数和解构 8.逻辑与运算符 大家好,我是 CUGGZ. 在日常的开发中,我们经常会编写一些条件语句,过多的 ​ ​if...else​ ​会导致代码难以理解和维护,今天来分享几个优化条件语句的小技巧! 1.Array.includes 来看下面的代码: function test(animal) { if (anima

  • 客户端js性能优化小技巧整理

    下面是一些关于客户端JS性能的一些优化的小技巧: 1. 关于JS的循环,循环是一种常用的流程控制.JS提供了三种循环:for(;;).while().for(in).在这三种循环中 for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;).while()循环的性能基本持平.当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或--运算符. 2. 如果需要遍历数组,应该先缓存数组长度var len=arr.len

  • Windows 2003系统四则优化小技巧

    针对服务器的需求,Windows 2003对声卡.显卡等硬件的默认设置做了处理,不过个人用户在使用时经常会碰到一些"故障",那么应当如何解决呢? 1.播放电影时画面粗糙 很多朋友都有这样的"遭遇":自己的电脑配置相当好,安装了Windows 2003后显卡也能够被自动识别并安装,可是播放电影时画面却非常粗糙,安装最新版显卡驱动后画面质量依然如故. 解决方法:在桌面上点击右键,依次进入"显示属性"\"设置"\"高级&q

  • JavaScript优化以及前段开发小技巧

    JavaScript优化以及前段开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN缓存 通过构建工具Gulp,可以在开发的时候就将合并压缩的事情一起做掉. 之所以要做合并压缩是因为:HTTP 1.x不允许一个连接上的多个响应数据交错到达(多路复用),因而一个响应必须完全返回后,下一个响应才会开始传输. 也就是说即使客户端同时发送了两个请求,而且CSS资源先准备就绪,服务器也会先发

  • 详解JavaScript中if语句优化和部分语法糖小技巧推荐

    目录 前言 if else 基本使用 简化if判断和优化代码 单行if else 使用&& || 优化 使用三目运算符优化 合并if 使用includes 或者indexof 使用switch流程 优化 多个if else 使用对象 key-value 优化多条if语句 使用map 推荐一些常用的JavaScript语法糖 箭头函数 三目运算符处理函数 函数默认参数处理 数据类型转换 Null.Undefined 布尔值等特殊值处理,使用||结合! 链判断运算符 链判断运算符 空值合并操作

  • ASP.NET常用小技巧

    今天为大家介绍6个ASP.NET常用技巧,使用操作简单,具有很高的实用性,记得收藏哦 1.跟踪页面执行  设置断点是页面调试过程中的常用手段,除此之外,还可以通过查看页面的跟踪信息进行错误排查以及性能优化.ASP.NET中启用页面跟踪非常方便,只需在Page指令中加入Trace="True"属性即可:设置断点是页面调试过程中的常用手段,除此之外,还可以通过查看页面的跟踪信息进行错误排查以及性能优化.ASP.NET中启用页面跟踪非常方便,只需在Page指令中加入Trace="T

随机推荐