如何提高滚动不透明度的指令的性能？

Question

我现在一直在努力改进这个指令几个小时，但似乎无法更进一步。有人可以推荐进一步改进吗

.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);
      });

      };
    })

我将此css用于指令所附加的元素：

transition: opacity .2s ease-in-out;

不科学的表现比较：

Answer 1

我有2条建议：

• 假设您未在代码中的其他任何观察者或模板中使用元素不透明度，我怀疑您不需要致电$scope.apply()。

• 您在调用requestAnimationFrame后进行了去抖动。你可以尝试在它之前进行去抖动，因此scroll上的事件监听器被去抖动。

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

  但我怀疑这是一个非常小的优化，根据事实，唯一的变化是不透明度，并且您使用requestAnimationFrame进一步将更改推迟到浏览器发现方便时。