如何优化在大型 AngularJS 项目

Posted 2021-04-26 小马学编程

最近在做了一个 AngularJS 项目，需要高性能，就此对 AngularJS 进行一番

比较深入研究。在此分享一下经验。

针对 AngularJS 项目可能影响应能的潜在问题，提出优化方案。

1.首先看一下，什么东西可能让我们 AngularJS 慢下来...

那么首先看一下 javascript 的本身性能缺陷

1.1 DOM 加载慢; 

1.2 单线程等

2. 接下来看一下低效的 directives(相比于AngularJS 的 DI(注入) 和 service(服务),他们都是单例的)

2.1 link 和 compile

2.2 $parse, $eval 和 inperpolation

3. 脏检查（由于数据绑定）

3.1 过多的绑定

3.2 watch 效率

3.3 过的调用 $apply

接下一一讲解

1. Directives: compile, link 和 constructor

在一个Controller中如果反复使用directive 例如在 ng-repeat

中使用了 directive，问题就来了,这时候

compile 仅被执行一次而 link 和 constructor 会被执行多次。

这样我们就行要尽可能把工作在 compile 中完成。

Directives 中使用嵌入，可以使用 directives 包裹其他dom 或

内容。这样可以通过 directives 来将内容孤立出来形成封闭的组件

不受外界影响。

2. $digest 和 $apply 区别我在这里就不过多赘述，

通常较为简单场景我们都选择 $apply, $apply 相比 $digest 优势是

他会对内存泄漏进行处理。

但是$digest 也有他的优先

当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，

但是当调用$apply的时候，会触发作用域树上的所有监控

恰当使用可以减少脏检查来提供效率

3. watcher 

scope.$watch(valueExpression, changeExpression, ...)

由于 valueExpression 可能被执行多次，说以尽量减少在

valueExpression 中触及 dom。

$watch 和 $watchCollection 

尽可能避免使用 $watch

在 $watchCollection 在 1.2 以后被引入，适合观察 array 和

object ,这些情况可以优先使用 $watchCollection。

4. $eval, $parse, $interpolate 这3个服务都是对值进行直接的计算

$parse 使用方式也比较灵活， 返回一个函数，后面可以跟一个作用域($scope)

$interpolate  插值服务, 值得注意的是这个需要添加一个表达式

返回函数

困了，今天就到这里 明天继续...