OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

AngularJS在大型单页面应用中的性能优化(一)


分享到
分类 JS学习   关键字 前端   发布 kris  1419818445256
注意 转载须保留原文链接,译文链接,作者译者等信息。  

1. 简介


无论你正在编写一个旧的应用程序还是在一个大型应用中采用AngularJS,性能是一个重要的方面。了解是什么原因导致AngularJS应用程序慢下来非常重要,要知道,在开发过程中做出权衡是很重要的。本文将介绍一些AngularJS比较常见的性能问题,以及优化的建议。

2. 性能测试工具


本文采用jsPerf http://jsperf.com/ 性能测试的基准。

3. 软件性能


评价软件性能有两个基本的因素:

首先是算法的时间复杂度。一个简单的例子就是线性搜索和二分检索有着非常显著的性能差距。

第二个软件缓慢的原因被称为空间复杂度。这是一台电脑需要多少“空间”或内存运行你的应用程序。内存需求越多,运行速度就越慢。


4 Javascript的性能


有些性能问题不仅仅是Angular带来的,而是JavaScript本来就有的。

4.1 循环


避免在循环内部调用函数,可以移到外部调用。

var sum = 0;
for(var x = 0; x < 100; x++){
  var keys = Object.keys(obj);
  sum = sum + keys[x];
}

上面的方面明显没有下面的快:

var sum = 0;
var keys = Object.keys(obj);
for(var x = 0; x < 100; x++){
  sum = sum + keys[x];
}

4.2 DOM访问


在获取DOM元素时要注意

angular.element('div.elementClass')

这种方式是非常昂贵的。其实这在AngularJS中并不会引起太大的问题。但是留意一下是有好处的。DOM树要小,DOM的访问要尽可能的少。

4.3 变量作用范围垃圾回收


把你的变量作用范围限制地越紧密越好,这样垃圾回收器就可以更快地回收空间。注意下面的问题:


function demo(){
    var b = {childFunction: function(){
        console.log('hi this is the child function')
    };
    b.childFunction();
    return b;
}

当这个函数终上了,这里就没有到b的引用。b就会被回收了。但是如果有这样一行:

var cFunc = demo();

这个引用就会阻止垃圾回收。要尽量避免这类引用。

4.4 数组和对象


这里有很多点:

比如:

for (var x=0; x<arr.length; x++) {
    i = arr[x].index;
}

比这一种快一点(注* arr为数组, obj为json对象)

for (var x=0; x<100; x++) {
    i = obj[x].index;
}

比这一种更快一点

var keys = Object.keys(obj);
for (var x = 0; x < keys.length; x++){
  i = obj[keys[x]].index;
}

测试 : http://jsperf.com/array-vs-object-perf-demo


5 重要的概念


我们已经讨论过有关JavaScript的性能,现在有必要看一看AngualrJS中的核心概念,看看它究竟是怎么运作的。

5.1 域(Scopes)和更新周期(Digest Cycle)


Angular的域本质上是一些JavaScript对象,它们从一些预定义的对象继承而来。基本上,小的域比大的域运行要快。

换句话说,每创建一个新的域,都会给垃圾回收器添加更多待回收的内容。

在写AngularJS应用中尤其要注意的一个核心概念和性能影响方面是更新周期(Digest Cycle)。实际上每一个域都会存放一个由方法组成的数组 $$watchers。

每当域中的一个值(属性)或绑定的DOM,如 ng-repeat,ng-switch 和 ng-if 等等,调用 $watch 时,一个函数(function)就会添加到相对应域中的$$watchers数组队列中。

当域中的值发生改变时,在$$watchers中所有的watchers函数都会被触发调用。并且当它们的任何一个修改了域中的某个值时,它们会被再次触发执行。

这个过程会一直循环下去直到$$watcher数组队列中不再做任何更改或抛出异常为止。

更外如果任何代码执行$scope.$apply(),都会触发更新周期。

最后一点是 $scope.evalAsync() 会在一个异步调用中执行,并且在当前和下个执行周期中,不会调用其的更新周期。


6. 在设计Angular时应该遵守的一般准则


6.1 大型对象和服务器调用


所以这些都告诉了我们什么?首先我们要尽可能地简化我们的对象。当对象是从服务器返回时,这一点尤为重要。

直接将数据库中的一行转换成对象只是临时性方案,因此不要使用.toJson().

只需要把Angular需要的属性值返回回来。

6.2 监视函数(Watching Functions)


另一个常见的问题是为观察者绑定的函数。不要将任何东西(ng-show, ng-repeat等等)直接绑定到一个函数。不要直接监视任何函数的返回值。该函数会在每个更新周期都执行,可能会降低你应用的速度。

6.3 监视对象(Watching Objects)


同样,Angular提供了第三个可选参数来监视整个对象的改动。将调用$watch的第三个参数设为true。这是一个非常可怕的想法。一个更好的解决办法是依靠服务和对象的引用,监视域之间的变化。



注* 相关阅读 AngularJS在大型单页面应用中的性能优化(二)




原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2014年最受欢迎的前十大语言:JavaScript、PHP、Java排前三
  2. 2015年的JavaScript:Angular之类的框架将被库取代
  3. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  4. 为什么io.js要从Node.js中分裂出来?
  5. HTML5的TCP和UDP Web Socket API草案定稿
  6. JavaScript代码组织结构良好的5个特点[reuqire.js]
  7. io.js新图标logo征集中
  8. 避免Node.js中的命令行注入安全漏洞
  9. 在JavaScript的Array数组中调用一组Function方法
  10. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  2. 在JavaScript的Array数组中调用一组Function方法
  3. 2015年的JavaScript:Angular之类的框架将被库取代
  4. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  5. Node.JS编码规范指南教程:教你优雅地写JavaScript代码
  6. JavaScript的设计缺陷?浮点运算:0.1 + 0.2 != 0.3
  7. Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的
  8. 理解JavaScript中的事件路由冒泡过程及委托代理机制
  9. 用JavaScript制作HTML5动画基础
  10. Node.js 包教不包会

 关键字 - 前端
  1. 用纯css改变下拉列表select框的默认样式
  2. 5个经典的前端面试问题
  3. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  4. 我们抛弃了AngularJS:单页面应用的5大缺陷
  5. Animate.css让添加CSS动画像喝水一样容易
  6. AngularJS在大型单页面应用中的性能优化(一)
  7. 我被问得最多的十个JavaScript前端面试问题
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 10个值得前端收藏的CSS3动效库(工具)
  10. 前端开发工程师岗 招聘

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号