Chrome中的性能问题 [英] Performance problems in Chrome

问题描述

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

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

解决方案

好吧，没有看到一些代码，很难准确地告诉你为什么它是超级慢或者可以做些什么来加速它。但考虑到你说这个对象是巨大的，我猜在angular digest循环期间angular会和所有的绑定一起挣扎。

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

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

   在观看数组时，可以使用 $ watchCollection （浅表）而不是 $




2. 当使用 ng-repeat ，尽量不要一次加载所有项目。尽可能分页。也许某种无限滚动？ ngInfiniteScroll




3. 避免使用过滤器在任何时候都可以，特别是在 ng-repeat s中包含大量项目。

避免绑定 ng-if ， ng-show 等函数进行大量处理，因为这些函数会在每个摘要循环中进行评估。 使用 ng-if 而不是 ng-show 当你可以。这会从dom中删除元素并破坏所有的观察者。 在可能的情况下，使用一次性绑定。这几乎更新了用户界面，然后忘记了绑定到的模型（从而避免了观察者）。




这可以通过添加来完成： ：到您的绑定





示例： {{:: myModel}}





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




4. $ interval 可能是邪恶的。每次使用$ interval ticks ，它都会触发一个摘要循环。在某些情况下，这可能不需要，可以通过传入 false 作为第四个参数来关闭。

   
   
   

   $ interval（fn，delay，[count]，[invokeApply]，[Pass]）

   
   
   

   这里：官方$ interval文档




5. 最后但并非最不重要的一点，PROFILE您的应用程序。
   
   

   像@Gideon所说的，使用谷歌浏览器分析工具来识别需要花费太多时间执行和优化它们的应用程序部分。
   $ b

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

这个也值得一看。一个角度指令，可用于在ng-repeat中的元素不在视图中时关闭监视器。 （我没有尝试过，但看起来没问题）



I am currently working in a relatively large project, built with AngularJs. One part of the application is a is a form that you can add any number of pages to (and unfortunately, a lot of unnecessary crap is added) , i.e. the object representing the model for the form can grow very large. At some point, Chrome basically can't handle it, and it takes 10 -20 seconds to get a field focused, or to push a button. Firefox, on the other hand, can manage at least 5 times as much quite smoothly.

My question is, what could be the reason for this? Is it large objects in general? Could it be due to a bad implementation with Angular?

解决方案

Ok without seeing some code, it's hard to tell you exactly why it's super slow or what can be done to speed it up. But considering you said that the object is huge, i guess angular is struggling with all the bindings during digest cycle.

So, here are some of the performance tunings you can do to try to speed up the app a bit.

1. Avoid using watchers when ever you can.

   And when watching arrays, maybe use $watchCollection(shallow watch) instead of $watch(which will deep watch the array)

2. When using ng-repeat, try not to load all items at once. Paginate when ever you can. Maybe some sort of infinite scroll? ngInfiniteScroll

3. Avoid using filters when ever you can, especially in ng-repeats with a lot of items.

4. Avoid binding ng-if, ng-show etc to functions that do heavy processing because then these get evaluated during every digest cycle.

5. Use ng-if instead of ng-show when you can. This removes element from dom and destroys all watchers as well.

6. Use one time bindings where possible. This pretty much updates the UI once and then forgets about the model it's binded to (thus avoiding watcher).

   This can be dome by adding :: to your bindings

   Example: {{::myModel}}

   A good article on one time binding: thoughtgram

7. $interval can be evil if not used carefully. Every time $interval ticks, it triggers a digest cycle. In some cases, this might not be needed and can be turned off by passing in false as the 4th parameter.

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

   More info here: official $interval docs

8. And last but not least, PROFILE you app.

   Like @Gideon has metioned, use google chrome profiling tool to identify parts of the application that are taking too much time to execute and optimise them.

   Built in profiler is good but consider using something like batarang specifically made for profiling angular apps.

Note: this might be worth looking into as well. An angular directive that can be used to turn off watchers for elements in ng-repeat when they are not in view. (I haven't tried it myself but looks ok)

这篇关于Chrome中的性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！