Chrome中的性能问题

Question

我目前正在使用AngularJs构建一个相对较大的项目。应用程序的一部分是一个表单，您可以添加任意数量的页面（并且不幸的是，添加了许多不必要的垃圾），即表示表单模型的对象可能会变得非常大。在某些时候，Chrome基本上无法处理它，需要10-20秒才能获得一个场聚焦或按下按钮。另一方面，Firefox可以非常顺利地管理至少5倍。

我的问题是，这可能是什么原因？一般来说它是大型物体吗？可能是由于Angular的实现不好？

Answer 1

Chrome DevTools中有一些非常强大的功能可用于分析应用程序的性能，包括时间轴和配置文件面板。

时间轴（How to use the Timeline Tool）

个人资料（Speed Up JavaScript Execution）

对象可能太大而无法存储的内存量，但您也可以优化组件的渲染以减少延迟。布局通常是性能问题的原因。您可以阅读有关Rendering performance的更多信息。

Answer 2

将该对象分成几个较小的对象可能会有所帮助。 object.foo和object['foo']之间的效果也可能不同。 还要尽量避免在您的结构中进行深度嵌套。 理论上，您的结构的某些部分可以根据需要按功能动态返回，例如。

Answer 3

好的，没有看到一些代码，很难告诉你为什么它超级慢或者可以做些什么来加快它。但是考虑到你说对象是巨大的，我猜角度在消化周期中与所有绑定都在挣扎。

所以，这里有一些性能调整可以尝试加快应用程序的速度。

1. 尽可能避免使用观察者。

   在观看数组时，可能会使用$watchCollection（浅表）代替$watch（这会深入观察数组）

2. 使用ng-repeat时，请尽量不要同时加载所有项目。 Pginate，你什么时候可以。也许是某种无限卷轴？ ngInfiniteScroll

3. 尽可能避免使用过滤器，尤其是在包含大量项目的ng-repeat中。

4. 避免将ng-if，ng-show等绑定到执行繁重处理的函数，因为这些函数会在每个摘要周期中得到评估。

5. 尽可能使用ng-if代替ng-show。这会从dom中删除元素并摧毁所有观察者。

6. 尽可能使用一次性绑定。这几乎只更新了UI一次，然后忘记了它绑定的模型（从而避免了观察者）。

   这可以通过将::添加到您的绑定

   来进行圆顶化

   示例：{{::myModel}}

   关于一次性约束的好文章：thoughtgram

如果不仔细使用，

7. $interval可能是邪恶的。每当$ interval ticks 时，它会触发一个摘要周期。在某些情况下，这可能不需要，可以通过传入false作为第4个参数来关闭。

   $interval(fn, delay, [count], [invokeApply], [Pass])

   此处有更多信息：official $interval docs

8. 最后但并非最不重要的是，PROFILE你的app。

   就像@Gideon所提到的那样，使用谷歌浏览器配置文件工具来识别需要花费太多时间来执行和优化它们的应用程序部分。

   内置的分析器很好，但考虑使用batarang专门用于分析角度应用程序的内容。

注意：this也许值得研究。一个角度指令，当它们不在视图中时，可用于关闭ng-repeat中元素的观察者。 （我自己没试过，但看起来不错）