AngularJS 整理一些优化的小技巧

关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的数据绑定原理 ng里每个页面上定义的model其实都会在当前作用域下添加一个监听器,内部容器就 AngularJS，通常简称为ng，是由Google开发的一款强大的MVVM（Model-View-ViewModel）前端框架，极大地提升了前端项目的开发效率。它通过控制器、指令和服务等核心组件构建项目，并利用特有的依赖注入（DI）机制解决了不同层之间的通信问题。然而，AngularJS也存在一些性能瓶颈，其中最主要的问题在于其数据绑定机制。 在AngularJS中，每个页面定义的model都会在当前作用域下添加一个监听器，这些监听器存储在$$watchers数组中。一旦任何model的值发生变化，$digest循环就会启动，遍历作用域树中的所有model以确保数据同步。由于这一过程涉及到大量的模型检查，因此当监听器数量达到2000个时，页面性能会显著下降。因此，优化AngularJS应用的关键之一就是减少监听器的数量。 以下是一些提高AngularJS性能的技巧： 1. 一次性绑定：在AngularJS 1.3.0及以上版本，可以通过在model前添加双冒号 (::) 来实现一次性绑定，如 `::hello`。这可以防止模型在后续的$digest循环中持续被监视，从而降低性能开销。 2. $scope.$digest vs $scope.$apply：$apply方法常用于在非AngularJS环境中执行代码后同步数据。$digest方法只会检查调用它的作用域及其子作用域内的模型，而$apply会从根作用域开始。因此，除非需要全局同步，否则应尽量使用$scope.$digest以减少查找模型的时间。 3. 减少ng-repeat的使用：ng-repeat在大数据量时会创建大量监听器，导致性能下降。如果数据列表不常更新，可以考虑使用$interpolate服务和$parse服务来替代，将预编译好的模板赋值给一次性模型，避免过多的监听器。 4. 在指令中使用原生语法：尽量避免使用如ng-show、ng-hide这类内置指令，它们会增加监听器。在指令的link函数中直接使用原生的CSS方法（如.show()、.hide()）或addEventListener来绑定事件，以减少监听器数量。 5. 避免在模板中使用内联过滤器：内联过滤器会导致模型在$digest中运行两次，影响性能。推荐使用$filter服务在后台调用过滤器，例如：`$filter('filter')(array, expression, comparator)`，这样可以提高性能。 总结来说，优化AngularJS应用需要从减少监听器数量、选择合适的同步方法、智能使用ng-repeat、避免在模板中过多使用指令和过滤器等方面入手。遵循这些最佳实践，可以帮助我们构建出更高效、响应更快的AngularJS应用。在开发过程中，始终思考如何减少不必要的监听器，是提升整体性能的关键。