运行 AngularJS 网络工作者、快速计时器和 $scope.$apply() 的性能问题

Question

我有一个以 10 毫秒为间隔在 Web Worker 中运行的计时器。每次计时器滴答作响时，都会在控制器中调用一个函数来递增一个变量。这个变量被我页面上的 bootstrap 进度条使用。

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

与此同时，我有一个数组，其中包含 $scope 上的一堆复杂对象（100 多个对象）。由于我需要调用 $scope.$apply() 以便在我的计时器每次滴答时让视图进行更改，它还会更新此对象列表（每 10 毫秒），这会减慢我的应用程序。

有没有人对我如何解决这个问题有任何想法？如果我可以提供更多详细信息，请告诉我。

Answer 1

如果你知道变量只需要在某个$scope更新，你可以在那个$scope调用$scope.$digest()。与 $apply() 相反，$digest() 只会运行那个 $scope（及其子节点）上的观察者，而不是整个应用程序。

Answer 2

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

我能想到的一种可能适合大多数架构的方法是使用节流函数，例如 lodash:

中的“_.throttle”

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

然后当您收到一条消息时，您会看到类似的内容：

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

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

Answer 3

如果 100 多个对象的元素在任何时候实际上都不是在屏幕上可见的，则您只能将屏幕上的元素包含在 DOM 中（因此只有它们的观察者）通过使用 https://github.com/kamilkp/angular-vs-repeat 之类的东西（我的一个同事不得不稍微破解它才能让它完全按照需要做：我忘记了细节）

运行 AngularJS 网络工作者、快速计时器和 $scope.$apply() 的性能问题

Running into AngularJS performance issues with web workers, fast timers, and $scope.$apply()

javascript

angularjs

performance

twitter-bootstrap

web-worker