在web工作者、快速定时器和$scope中遇到AngularJS性能问题$apply()

Question

我有一个计时器，它以10毫秒的间隔在网络工作者中运行。每次计时器滴答作响时，控制器中都会调用一个函数，使变量递增。这个变量被我页面上的引导程序进度条使用。

我遇到的问题是，除非我调用$scope，否则进度条不会更新$在更新值的函数调用中的apply（）。

同时，我有一个数组，里面有一堆复杂的对象（100多个对象），它们在$scope上。因为我需要调用$scope$apply（）为了让视图在每次计时器计时时都进行更改，它还更新了这个对象列表（每10ms更新一次），这降低了我的应用程序的速度。

有人知道我该如何解决这个问题吗？如果我能提供更多的细节，请告诉我。

Answer 1

如果100多个对象的元素在任何时候都不是在屏幕上都可见，那么您只能通过使用以下内容将屏幕上的元素包括在DOM中（因此只有观察者）https://github.com/kamilkp/angular-vs-repeat（我的一位同事不得不稍微破解一下，才能让它完成所需的任务：我忘记了细节）

Answer 2

如果您知道变量只需要在某个$scope中更新，则可以在该$scope上调用$scope.$digest()。与$apply()相反，$digest()将只在该$scope（及其子级）上运行观察程序，而不是在整个应用程序中运行。

Answer 3

每10毫秒更新一次是非常频繁的。如果一切都保持不变，这将是每秒100次更新：大约是许多视频格式帧速率的4倍。加快速度的一个非常简单的方法是大幅减少这种情况。

我可以想到的一种可能适合大多数体系结构的方法是使用节流函数，例如lodash:中的"_.strottle"

var throttledApply = _.throttle($scope.apply, 500);

然后，当你收到一条消息时，你会得到这样的信息：

worker.onmessage = function(e) {
  // ... Other processing code ...
  throttledApply();
};

如果您使用Bootstrap进度条，即使它们之间的差异很大，它仍然应该在显示的值之间提供平滑的转换。