9种改善AngularJS性能的方法

AngularJS 是今朝应用异常广泛的 web app 应用框架，跟着它的受迎接程度持续上升，等待已久的AngularJS 4.0 出生了。尽管已经做了很多优化，但几乎每个 Angular 专家仍然在处理应用 AngularJS 中出现的各类各样的问题。

今朝，企业应用Web技巧用在他们各自项目上，在线营业是以受到了极大年夜影响。是以，有须要深刻发掘影响企业成长的各类身分。

然则，有可能不精确地应用 AngularJS 办法会影响你的应用法度榜样在市场上的排名，是以 AngularJS 机能优化成为每个AngularJS开辟专家的重要需求。这就是为什愦我们在这个博客中列出了九种进步 AngularJS 机能的办法的原因。

对于应用 Angular 的团队来说， Batarang 是一个不错的开辟对象，它可以削减你在调试上的压力。尽管可能有很多新特点，但它们重要照样来赞助你描述和追踪你的 AngularJS 的机能。此外，它是经由过程监控树来决定哪个范围不被烧毁的，例如，经由过程查看内存应用量是否有增长来决定是否烧毁。

比来，巴西计算机科学家进行了一项查询拜访，他们发明有关引起AngularJS法度榜样员机能问题的原因的有趣事实。对于AngularJS在实际世比赛的机能并没有太多的信息。然则基于查询拜访的研究为此供给了一些证据。

该查询拜访获得下面结不雅：

在对 AngularJS 机能进行了如斯多的评论辩论之后，如今可以看看九种可以改良 AngularJS 机能的办法了。

AngularJS 的机能可以简单地经由过程它的 digest 周期测量。digest 周期可以被作为一个轮回。在这个周期中，Angular 经由过程所有的 $scopes来检查所有变量的改变。如不雅$scope.myVar 是定义在控制器(controller)中并且标记为不雅察，那么 Angular 将会对myVar更新进行监督，这种监督每迭代轮回一次就检查一次。

1.用 Batarang 对象对 Watcher 进行基准测试

2.应用 Native JavaScript 或 Lodash

3.TestingWhiz

Lodash 经由过程简单地重写一些根本逻辑，而不是依附内置的 AngularJS 办法来进步应用法度榜样机能。如不雅你的应用法度榜样中没有包含 Lodash，那么你可能须要从新编写 Native 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

没有应用 ng-repeat 指令就是应用法度榜样的最大年夜成功，是以建议避免应用 ng-repeat 并应用 JavaScript 构建 HTML。对于发声的应用法度榜样，应用 ng-if 导致增长不须要的不雅察者。应用 ng-bind-html 指令是摆脱这个问题的更好的解决筹划。

7.应用 $watchCollection (包含第三个参数)

应用带有两个参数的 $watch 是好的 - 然则在应用 $watch(‘value’,function(){},true)时带有三个参数的 $watch，这使得 Angular 可以履行深度检查(以检查对象的每个属性)。但价值可能是十分昂贵的。是以，为懂得决如许一个机能问题，Angular供给了 $watchCollection(‘value’, function(){})指令，它与第三个参数几乎雷同，只是以低成本检查对象属性的第一层。

8.为了调试问题应用 console.time