AngularJS：观察尺寸的最佳方式？

因此，我对此提出了一些解决方案，但我仍然不太确定什么是最好的。首先供参考，我可以找到一个类似的问题，尽管它有点旧了。这是供稍后阅读本文的任何人使用的：观察 Angular 中的尺寸变化 https://stackoverflow.com/questions/19048985/angularjs-better-way-to-watch-for-height-change

The Goal

我的应用程序中有一些部分需要响应式高度元素。我想要以最快、最具视觉吸引力的方式在 UI/指令层执行此操作，而不需要显式广播更改事件。

选项一：指令

一个简单的指令可以记录每个摘要循环的尺寸（和调整大小事件）

return {
  scope: {
    size: '=ngSize'
  },
  link: function($scope, element, attrs) {

    var windowEl = angular.element($window),
        handler  = function() {
          if ($scope.size &&
              element.outerWidth() === $scope.size.width &&
              element.outerHeight() === $scope.size.height) return false;
          $scope.size = {
            width: element.outerWidth(),
            height: element.outerHeight()
          };
        };

    windowEl.on('resize', function() {
      $scope.$apply(handler);
    });

    $root.$watch(function() { return [element.outerWidth(), element.outerHeight()] }, handler, true);

  }
};

Problem:这种变化传播得不够快，视觉滞后很明显。

解决方案：使用间隔调用

选项二：$interval

我用 $interval 调用尝试了同样的事情，它起作用了，但 CPU 使用率出人意料地高，即使在我反转控制并跟踪按值监视的简单根集合中的元素之后（避免由指令的多个实例产生并发计时器） ）。

除了我的环境中一些与 GC 相关的问题（我目前没有看到任何表明这一点的问题）之外，是否有更好的方法来创建这种流体布局？

提议的解决方案/问题

我的第一个想法是创建一个并发的 $digest 循环，以有效地监控整个 DOM 的任何视觉变化。是否可以有效地迭代所有计算样式，例如，生成可以按值监视的廉价哈希值？每次添加和/或更改相关的计算样式时都可以相对便宜地触发某些东西？

在我构建和分析它之前，有人可以评论一下它是否现实，或者首先抽象/重构调整大小触发器是否更有意义？

关于实现此目标的首选方式的任何其他想法1.2.9?

[edit] 另一个可能更简单的问题：是否有可能通过 Javascript 以计算高效的方式提供 1-200 毫秒的实际刷新率？如果是这样，那是 Angular 的 $interval，还是“VanillaJS”实现会更有效？

不幸的是，这个问题并没有得到我希望的那么多关注......而且我没有时间写一个包含背景、分析器屏幕截图等的详细解释。但我确实找到了一个解决方案，我希望这会有所帮助其他人正在处理同样的问题。

结论

任何实际中大型应用程序中的 $digest 循环都无法处理 100 毫秒的刷新。

鉴于要求setInterval我只是完全绕过了循环，而是选择仅在检测到不同维度时广播状态更改（使用offsetWidth/Height原生属性）。

以 100ms 的间隔运行一个$root范围清单给出了我测试过的所有测试的最佳结果，在我的 2.4Ghz i7 2013 MBP 上大约有 10.2% 的活动选项卡 CPU——相比之下，大约 84% 的活动选项卡 CPU 是可以接受的$interval.

欢迎任何评论和批评，否则，这里是独立的指令！显然，您可以通过范围和/或属性来发挥创意来自定义观察者，但为了保持主题不变，我尝试省略任何多余的代码。

对于具有线性复杂度的 N 个元素，它将监视元素的大小变化并将其绑定到您选择的范围属性。我不能保证这是最快/最好的方法，但它是我可以快速开发的最快的实现，可以跟踪与状态无关的 DOM 级维度变化：

app.directive('ngSize', ['$rootScope', function($root) {
  return {
    scope: {
        size: '=ngSize'
    },
    link: function($scope, element, attrs) {

        $root.ngSizeDimensions  = (angular.isArray($root.ngSizeDimensions)) ? $root.ngSizeDimensions : [];
        $root.ngSizeWatch       = (angular.isArray($root.ngSizeWatch)) ? $root.ngSizeWatch : [];

        var handler = function() {
            angular.forEach($root.ngSizeWatch, function(el, i) {
                // Dimensions Not Equal?
                if ($root.ngSizeDimensions[i][0] != el.offsetWidth || $root.ngSizeDimensions[i][1] != el.offsetHeight) {
                    // Update Them
                    $root.ngSizeDimensions[i] = [el.offsetWidth, el.offsetHeight];
                    // Update Scope?
                    $root.$broadcast('size::changed', i);
                }
            });
        };

        // Add Element to Chain?
        var exists = false;
        angular.forEach($root.ngSizeWatch, function(el, i) { if (el === element[0]) exists = i });

        // Ok.
        if (exists === false) {
            $root.ngSizeWatch.push(element[0]);
            $root.ngSizeDimensions.push([element[0].offsetWidth, element[0].offsetHeight]);
            exists = $root.ngSizeWatch.length-1;
        }

        // Update Scope?
        $scope.$on('size::changed', function(event, i) {
            // Relevant to the element attached to *this* directive
            if (i === exists) {
                $scope.size = {
                    width: $root.ngSizeDimensions[i][0],
                    height: $root.ngSizeDimensions[i][1]
                };
            }
        });

        // Refresh: 100ms
        if (!window.ngSizeHandler) window.ngSizeHandler = setInterval(handler, 100);

        // Window Resize?
        // angular.element(window).on('resize', handler);

    }
  };
}]);