九种"姿势"让你提高Angular性能

众所周知AngularJS是当今应用最广泛的Web应用程序框架，并且它的受欢迎程序在其期待已久的AngularJS 4.0到来之后不断上升。但是我们可以看到，几乎所有的Angular专家仍然在努力解决与AngularJS性能相关的各种问题，尽管它自己也做了很多的优化。

在对AngularJS的性能进行了大量讨论之后，现在是时候看看这九种可以提高AngularJS性能的姿势了。

1. 使用Batarang工具来评估监视器 Batarang是由Angular团队推出的一个伟大的开发工具，它可以减轻你调试的工作量。它包含了许多新功能，其中一些功能可以帮助你描述和跟踪AngularJS运行的性能。此外，在内存占用出现增长时，监视树能够确定哪些scope没有被销毁。

2. 原生JavaScript或Lodash的使用

Lodash通过重写一些基本逻辑来提高应用程序的性能，而不是依靠AngularJS内置方法。如果你的应用程序中没有包含Lodash，那么你可能需要使用原生JavaScript来重写所有内容。

3. 用Chrome的开发者工具Profiler来找出性能瓶颈

这是一个很方便的工具，它可以让你选择要创建的概要的类型。它通过记录内存分配时间线、内存分配概要和堆快照等手段来对内存进行分析。经过这一轮的性能优化之后，你的应用可以在两秒钟之内完全呈现出来，然后用户就可以随意与之交互了。

4. 减少监视者

AngularJS完全是围绕着digest cycle来运行的。每当digest cycle触发时，它将循环遍历每个绑定以检测模型是否发生了改变。通过减少监视者的数量，可以减少每个digest cycle所花费的时间。 它还可以减少应用程序的内存占用。

5. ng-if 优于 ng-show

ng-show指令在特定的元素上切换CSS显示属性，而ng-if指令实际上会先从DOM中删除元素，如果在需要的话重新创建。此外，ng-switch指令是ng-if的替代方案，具有相同性能优势。

6. 不要使用 ng-repeat

建议避免在JavaScript中使用ng-repeat来构建HTML。对于某些应用程序来说，使用ng-repeat会增加不必要的监视者。使用ng-bind-html指令是解决这个问题的更好的办法。

7. 使用$watchCollection

通常在使用watch('value',function(){},true)，则可以让Angular执行深度检查（检查对象的每个属性）。但这可能会带来更多的性能开销。因此，为了解决这个性能问题，Angular提供了watch的几乎相同，只是它只检查对象属性的第一层，以降低性能开销。

8. 使用console.time来调试问题

如果你在对应用程序努力地进行调试，以解决性能问题的话，请使用console.time，这是一个非常棒的API。

9. 去抖ng-model

你可以使用ng-model来去除输入。例如，要撤销像GOOGLE这样的搜索输入的话，你必须使用ng-model-options=”{debounce:250}”。由于输入模型发生了变化，使得digest cycle每250ms触发不超过一次。 用于开发的时间现在非常宝贵，因此你需要一个像AngularJS这样的功能全面的框架来快速开展业务。 在研究了很多东西之后，我们收集整理了其他一些重要的工具可以用来增强AngularJS的性能。

总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对前端攻城小牛的支持。 本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。