九种提高AngularJS性能的方法

资讯频道 → Web前端

0顶
0踩

2017-06-23 09:57 by 副主编 jihong10102006 评论(0) 有14256人浏览

AngularJS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

引用

原文：9 Ways to Improve AngularJS Performance
作者：Justin Spencer
翻译：雁惊寒

译者注：本文介绍了提高AngularJS性能的九个方法，以及四个AngularJS性能增强辅助工具。以下是译文。

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

今天，在线业务受网络技术性能的影响很大。因此，有必要研究一下影响业务发展的所有因素。

不正确地使用AngularJS有可能会限制应用程序在市场上的表现，因此，AngularJS性能优化成为每个AngularJS开发专家的重要责任。这就是为什么我们要在这个博客中列出提高AngularJS性能的九种方法。

最近，巴西计算机科学家进行了一项调查，他们发现了导致性能问题的一些有趣的事实。这项调查并没有提到有关AngularJS在现实世界中如何运行的太多的信息，但是基于这项调查的研究为此提供了一些证据。

调查结果如下：

有45％的人表示是源代码的问题影响了性能。
只有8％的人承认对实际做了修改。
有些受访者指责AngularJS的架构有问题。
其中有些人指责不必要的双向绑定影响了性能。

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

AngularJS的性能可以通过digest cycle测量出来。digest cycle可以认为是一个循环。在这个循环中，Angular将检查所有的$scopes监视的每一个变量是否发生改变。如果$scope.myVar在控制器中定义并被标记为监视，则Angular将在每个循环中监视myVar是否发生改变。

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的时候只会用到两个参数，但是如果加上第三个参数的话，例如`$watch('value',function(){},true)`，则可以让Angular执行深度检查（检查对象的每个属性）。但这可能会带来更多的性能开销。因此，为了解决这个性能问题，Angular提供了`$watchCollection('value', function(){})`，它的第三个参数的功能与$watch的几乎相同，只是它只检查对象属性的第一层，以降低性能开销。

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

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

9. 去抖ng-model

你可以使用ng-model来去除输入。例如，要撤销像GOOGLE这样的搜索输入的话，你必须使用ng-model-options=”{debounce:250}”。由于输入模型发生了变化，使得digest cycle每250ms触发不超过一次。

用于开发的时间现在非常宝贵，因此你需要一个像AngularJS这样的功能全面的框架来快速开展业务。

在研究了很多东西之后，我们收集整理了其他一些重要的工具可以用来增强AngularJS的性能。

下面看一下这四个AngularJS性能增强工具。

1. Protractor

Protractor是由Angular团队开发的最强大的端到端Angular自动测试工具。Protractor融合了很多伟大的技术，如NodeJS、Selenium、webDriver、Mocha、Cucumber和Jasmine。

2. GulpJS

GulpJS可用于自动执行重复任务、流媒体构建系统，以及使用JSHint或ESLint检查JavaScript脚本。

3. TestingWhiz

TestingWhiz是一款用户友好的自动化测试工具，因为它具有无代码脚本功能。 TestingWhiz提供了端到端的测试解决方案来对AngularJS应用程序进行测试。它具有多种测试命令，可以很轻松地创建与AngularJS相关的测试。

4. WebdriverIO

WebdriverIO可以让你只需通过几行代码就能控制浏览器或移动应用程序。它的测试代码简单明了、易于阅读。集成测试运行器允许你以同步的方式编写异步命令，这样，你就无需关心如何来避免竞争状态。此外，它消除了所有繁琐的设置工作，并为你管理Selenium会话。

总结

正如我们所看到的，由于在Web开发中引入了很多新的JavaScript框架，Web开发的发展速度非常得快。为了从这些框架中获得最大的收益，你必须定期进行性能优化。

AngularJS是最强大的Web应用构建框架之一。通过提升AngularJS的性能，开发人员可以用更少的代码来做更多的事情。即便是编写出“意大利面条式代码”的风险也大大降低。

查看图片附件

分享到：

0
顶

0
踩

评论共 0 条请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

9种改善AngularJS性能的方法

AngularJS 是目前使用非常广泛的 web app 应用框架，随着它的受欢迎程度持续上升，期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化，但几乎每个 Angular...这就是为什么我们在这个博客中列出了九种提高 Angular

9 种改善 AngularJS 性能的方法

原文：...AngularJS 是目前使用非常广泛的 web app 应用框架，随着它的受欢迎程度持续上升，期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化，但几乎每个 Angular 专家仍然在处理使用&n...

第21篇：9 种改善 AngularJS 性能的方法

原文：...AngularJS 是目前使用非常广泛的 web app 应用框架，随着它的受欢迎程度持续上升，期待已久的AngularJS 4.0 诞生了。尽管已经做了很多优化，但几乎每个 Angular 专家仍然

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

众所周知AngularJS是当今应用最广泛的Web应用程序框架，并且它的受欢迎程序在其期待已久的AngularJS 4.0...在对AngularJS的性能进行了大量讨论之后，现在是时候看看这九种可以提高AngularJS性能的姿势了。 1. 使用B...

AngularJS

1.AngularJS是一个用于设计动态web应用的js框架 2.它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强 3.能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属性等，这些HTML原生...

angularJS详解

AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些...

AngularJs 总结

AngularJS是google在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学...

angularjs详解

angularjs框架

AngularJs学习

AngularJS学习笔记

常见九大性能压测工具收藏

在移动应用和Web服务正式发布之前，除了进行必要的功能测试和安全测试，为了保证互联网产品的服务交付质量，...在产品研发过程中，常常会混淆压力/负载/性能测试这三者之间的区别，这三种测试到底有什么不同呢？压

转载的关于AngularJs的总结

AngularJS是谷歌在维护，其在国外已经十分火热，可是国内的使用情况却有不小的差距，参考文献/网络文章也很匮乏。这里便将我学习AngularJS写成文档，一方面作为自己学习路程上的记录，另一方面也给有兴趣的同学一些...

angularjs学习总结详细教程

angularjs学习总结

基于物联网智能化平台的智慧园区解决方案PPT(28页).pptx

智慧园区，作为现代城市发展的新形态，旨在通过高度集成的信息化系统，实现园区的智能化管理与服务。该方案提出，利用智能手环、定制APP、园区管理系统及物联网技术，将园区的各类设施与设备紧密相连，形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店，从智慧景区到智慧康养，再到智慧生态，五大应用板块覆盖了园区的每一个角落，为居民、游客及工作人员提供了全方位、个性化的服务体验。例如，智能手环不仅能实现定位、支付、求助等功能，还能监测用户健康状况，让科技真正服务于生活。而智慧景区的建设，更是通过大数据分析、智能票务、电子围栏等先进技术，提升了游客的游玩体验，确保了景区的安全有序。尤为值得一提的是，方案中的智慧康养服务，展现了科技对人文关怀的深刻体现。通过智慧手环与传感器，自动感知老人身体状态，及时通知家属或医疗机构，有效解决了“空巢老人”的照护难题。同时，智慧生态管理系统的应用，实现了对大气、水、植被等环境要素的实时监测与智能调控，为园区的绿色发展提供了有力保障。此外，方案还提出了建立全域旅游营销平台，整合区域旅游资源，推动旅游业与其他产业的深度融合，为区域经济的转型升级注入了新的活力。总而言之，这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计，为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量，更让科技真正融入了人们的生活，带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言，这份方案无疑提供了一份宝贵的参考与启示，激发了他们对于未来智慧生活的无限遐想与憧憬。

MES制造企业生产过程执行系统：全方位协同管理，提升生产效率与质量的信息化管理平台,MES制造企业生产过程执行系统：全面协同管理，提升生产效率与质量管理水平,mes制造企业生产过程执行系统，是一套面向

MES制造企业生产过程执行系统：全方位协同管理，提升生产效率与质量的信息化管理平台,MES制造企业生产过程执行系统：全面协同管理，提升生产效率与质量管理水平,mes制造企业生产过程执行系统，是一套面向制造企业车间执行层的生产信息化管理系统。 MES 可以为企业提供包括制造数据管理、计划排产管理、生产调度管理、库存管理、质量管理、人力资源管理、工作中心设备管理、工具工装管理、采购管理、成本管理、项目看板管理、生产过程控制、底层数据集成分析、上层数据集成分解等管理模块，为企业打造一个扎实、可靠、全面、可行的制造协同管理平台 ,MES制造企业生产过程执行系统;生产信息化管理;制造数据管理;计划排产管理;生产调度管理;库存管理;质量管理;人力资源管理;设备管理;数据集成分析,MES制造企业生产执行系统：全面协同管理平台助力制造企业高效运营

C++指针与内存管理详解：避免常见错误及最佳实践

内容概要：本文介绍了C++编程中常见指针错误及其解决方案，并涵盖了模板元编程的基础知识和发展趋势，强调了高效流操作的最新进展——std::spanstream。文章通过一系列典型错误解释了指针的安全使用原则，强调指针初始化、内存管理和引用安全的重要性。随后介绍了模板元编程的核心特性，展示了编译期计算、类型萃取等高级编程技巧的应用场景。最后，阐述了C++23中引入的新特性std::spanstream的优势，对比传统流处理方法展现了更高的效率和灵活性。此外，还给出了针对求职者的C++技术栈学习建议，涵盖了语言基础、数据结构与算法及计算机科学基础领域内的多项学习资源与实战练习。适合人群：正在学习C++编程的学生、从事C++开发的技术人员以及其他想要深入了解C++语言高级特性的开发者。使用场景及目标：帮助读者掌握C++中的指针规则，预防潜在陷阱；介绍模板元编程的相关技术和优化方法；使读者理解新引入的标准库组件，提高程序性能；引导C++学习者按照有效的路径规划自己的技术栈发展路线。阅读建议：对于指针部分的内容，应当结合实际代码样例反复实践，以便加深理解和记忆；在研究模板元编程时，要从简单的例子出发逐步建立复杂模型的理解能力，培养解决抽象问题的能力；而对于C++23带来的变化，则可以通过阅读官方文档并尝试最新标准特性来加深印象；针对求职准备，应结合个人兴趣和技术发展方向制定合理的学习计划，并注重积累高质量的实际项目经验。

VSC下垂控制策略仿真模型：基于MATLAB 2014a及更高版本的全面支持与应用实践,VSC下垂控制策略仿真模型MATLAB版本支持及功能解析,VSC下垂控制策略仿真模型，支持MATLAB2014a

VSC下垂控制策略仿真模型：基于MATLAB 2014a及更高版本的全面支持与应用实践,VSC下垂控制策略仿真模型MATLAB版本支持及功能解析,VSC下垂控制策略仿真模型，支持MATLAB2014a及以上版本 ,VSC下垂控制策略; 仿真模型; MATLAB 2014a及以上版本; 核心关键词,MATLAB 2014a及以上版VSC下垂控制策略仿真模型研究

0顶0踩