AngularJS性能优化实战：减少$$watchers与监听器负担

关于提升AngularJS性能的方法，网络资料已十分丰富，其核心逻辑多围绕$$watchers这一作用域内部属性展开。本文将探讨其他实用技巧，尽管根本原因仍在于AngularJS的架构特性，但通过恰当的技术手段，这些性能问题是可以有效规避的。

AngularJS简介

AngularJS简介

AngularJS（简称NG）是由Google开发的MVVM框架。在实践中，它能显著提升前端项目的开发效率。该框架以控制器、指令和服务为核心构建项目，并通过其独特的依赖注入（DI）机制解决各层级间的调用问题。如需了解更多细节，可参考相关的AngularJS源码分析文章。

AngularJS的性能瓶颈

AngularJS的性能瓶颈

要理解其性能瓶颈，首先需了解其基础的数据绑定原理。

在AngularJS中，页面定义的每个模型（model）都会在当前作用域下注册一个监听器，内部存储于$$watchers数组中。只要页面中任意模型发生变化，就会触发作用域内部的$digest方法。该方法会遍历当前作用域树下的所有模型，以确保页面模型数据同步。这一过程非常消耗计算资源，官方指出，当页面监听器数量达到2000个时，页面性能会出现明显下降。因此，提升AngularJS性能的关键在于优化监听器的使用。

AngularJS性能优化技巧

技巧一：一次绑定（One-time Binding）

虽然网上已有相关讨论，但这里介绍一种更简洁的新用法。从AngularJS 1.3.0版本开始，框架内置了支持模型只绑定一次的新语法，具体示例如下：

hello

新代码示例

hello

可以看出，新语法只需在模型前添加::符号。相比使用第三方插件，这种内置方式更为便捷高效。

技巧二：$scope.$digest与$scope.$apply的选择

$apply方法广为人知，通常用于在AngularJS环境外执行代码后，通过调用$apply触发内部的$digest来检查作用域内所有模型，从而保证页面数据同步。其内部实现大致如下，仅展示部分代码片段：

...
...
$rootScope.$digest
...
...

由此可见，$apply最终调用的是$rootScope根作用域下的$digest。那么，不同作用域下的$digest有何区别？最关键的区别在于：

$digest 只深度查找调用方下面所有的模型

因此，与$rootScope相比，使用特定作用域的$digest能节省大量查找模型的时间。

然而，若需确保页面上所有模型数据同步，仍必须调用$rootScope。因此，在编写代码前，应仔细规划哪些数据需要同步变化，以平衡性能与功能。

技巧三：尽可能减少ng-repeat的使用

ng-repeat默认会创建大量监听器，在数据量巨大时，这会严重消耗页面性能。笔者认为，仅在需要频繁更新数据列表时才应使用ng-repeat。否则，过多的监听器纯属浪费。此时，可利用AngularJS内置的$interpolate服务解析代码片段，它类似于一个静态模板引擎，内部主要依赖Angular核心解析服务$parse。将填充数据后的代码片段直接赋值给一个一次性模型即可。

技巧四：尽量在指令中使用原生语法

虽然AngularJS提供了ng-show、ng-hide等指令，它们根据模型的true或false值显示或隐藏代码片段，能快速实现业务需求，但这些指令默认会添加监听器。如果这些代码片段存在于大型指令中，更优的方法是在指令的link函数中编写.show()、.hide()等jQuery方法来控制显示隐藏，这样可以节省监听器数量。类似地，对于自带的事件指令，也可在外围指令中通过addEventListener绑定事件。总之，在编码前应思考如何最小化监听器数量，从而全面提升页面性能。

技巧五：页面内尽量少用filters

当在页面模型后增加filter时，会导致该模型在$digest中运行两次，造成不必要的性能浪费。第一次发生在$$watchers检测任务改变时；第二次发生在模型值修改时。因此，应尽量避免使用内联过滤器语法，如下例所示，这会严重影响页面性能：

推荐使用$filter服务在后台调用过滤器函数，这样能显著提高页面性能，代码如下：

$filter('filter')(array, expression, comparator);

总结

总结

上述技巧旨在提升AngularJS项目的性能。尽管AngularJS功能强大，但不规范的代码仍会破坏其性能。因此，在编码前应构思好哪些部分不需要监听器，以优化整体表现。