Javascript 如何提高该指令在滚动时转换不透明度的性能？

我已经花了几个小时来改进这个指令，但似乎没什么进展。有人能推荐进一步的改进吗

.directive("scrollFade", function($window) {
      return function(scope, element, attrs) {

      var ngWindow = angular.element($window);
      var offset = 100;

      function scrollAndFade(){
        var top_of_element = element.offset().top + offset;
        var bottom_of_window = ngWindow.scrollTop() + $window.innerHeight;

        if (top_of_element < bottom_of_window) {
          element[0].style.opacity = 1;
        } else {
          element[0].style.opacity = 0;
        }
      }

      ngWindow.bind("scroll", function() {
        _.debounce(function() {
           window.requestAnimationFrame(scrollAndFade);
        }, 50);
      });

      };
    })

不科学的绩效比较：

---

我有两个建议：

假设您没有在代码中的任何观察者或模板中使用元素不透明性，我怀疑您不需要调用$scope.apply

在调用requestAnimationFrame后，您正在解除抖动。您可以在它之前尝试去抖动，这样滚动条上的事件侦听器就去抖动了

ngWindow.bind("scroll", function() {
  _.debounce(function() {
     window.requestAnimationFrame(scrollAndFade);
  }, 50);
});

但我怀疑这是一个非常小的优化，因为唯一的变化是不透明度，并且您正在使用requestAnimationFrame进一步将更改推迟到浏览器觉得方便的时候

---

跳过jQuery计算高度不会提高性能。这有点疯狂，但似乎确实有效果。让我再探索一下，看看这是真的还是假的。@user2864740完全是不科学的胡说八道，但看看那些山峰。它们看起来确实更低。很可能是缓存或滚动速度相关或其他原因。这很有趣。你为什么要使用window.requestAnimationFrame？你能解释一下怎么做吗？我不知道如何用这种方式组织它。@EmptyPockets我在答案中添加了一段代码。谢谢@Michal，我用你的建议更新了我的帖子。删除$scope.apply是可行的，但它似乎与您提供的代码片段不符。没有错误，只是不起作用。

ngWindow.bind("scroll", function() {
  _.debounce(function() {
     window.requestAnimationFrame(scrollAndFade);
  }, 50);
});