原文地址：http://web.jobbole.com/82060/
大型应用下的 AngularJS 性能
1 介绍
无论你是为一个拥有大量用户的旧应用编写一个Angalar前端,或已有的Angular应用正在迅速扩张,性能都是一个重要方面。理解什么会导致AngularJS应用程序响应变慢，并且知道在开发过程中对此做出一些权衡是非常重要的。本文将讲述一些AngularJS可能导致的常见性能问题，以及给出在未来如何修复和避免他们的建议。
1.1 需求，假设
本文假设对JavaScript编程语言和AngularJS比较熟悉。当使用特定于版本的特性,他们会被标注。如果你已经花了一些时间在玩Angular，但还没有认真地处理性能问题，那么你最能吸收这篇文章的要义。
2 行业工具
2.1 基准分析
最出色的代码基准测试工具就是jsPerf。为了增强可读性，我将在后面相关的部分链接到特定的test runs（测试例子）。
2.2 性能分析
Chrome开发工具有一个很棒的Javascript分析器。我强烈推荐阅读本系列文章。
2.3 Angular Batarang
由Angular核心团队维护的一个专用的Angular调试器， 在GitHub上可以获取。
3 软件性能
有两个导致软件性能差的根本原因。
第一个是算法的时间复杂度。解决这个问题很大程度上超出了本文的范围,一般可以这样说,时间复杂度是衡量一个程序需要做多少次的比较来实现一个结果。比较数量越多,程序越慢。一个简单的例子是线性查找与二分查找。线性查找对于同一组数据需要进行更多的比较,因此会慢。时间复杂度的详细讨论,请参考维基百科文章。
第二个原因是空间复杂度。这是一台电脑运行你的解决方案需要多少“空间”或内存的测量。需要的内存越多,解决方案就越慢。本文将讨论的大多数问题,围绕空间复杂度。详细讨论,请参阅这里.。
4 Javascript性能
有些要说的是关于Javascript性能,这里并不局限于Angular。
4.1 循环
避免在一个循环中调用外部函数。一旦任何调用可以在循环外部的完成,它将大大加速你的系统。例如:
|
1
2
3
4
5
|
var
sum
=
0
;
for
(
x
;
&
lt
100
x
++
)
{
keys
Object
.
keys
(
obj
;
+
keys
[
x
]
;
}
|
上面将大大慢于下面:
|
1
2
3
4
5
|
var
sum
=
0
;
keys
Object
.
keys
(
obj
)
;
for
(
x
;
&
lt
100
x
++
{
+
keys
[
x
]
;
}
|
http://jsperf.com/for-loop-perf-demo-basic
4.2 Dom访问
需要着重注意的是访问DOM是昂贵的。
| 2 |
unbinder
.
$
watch
'scopeValueToBeWatcher'
newVal
oldVal
{
;
unbinder
//this line removes the watch from $$watchers.
|
如果你不能过早地解除绑定,记得在$on(‘$destroy’)解除绑定
9.4$on,$broadcast,and$emit
像$watch,这些都是慢的，因为事件(可能)遍历你的整个scope的层次结构。除此之外,它们会像GOTO一样，让您的应用程序很难调试。幸运的是,像$watch,如果有必要他们可以通过返回函数解除绑定(记得在$on('$destroy')解除绑定,同时可以通过正确地使用服务和scope继承来完全避免）。
