Question

我有一个元素我正在基于滚动位置应用一些基本过渡。它在Safari和Firefox中按预期顺利运行，但在Chrome中滚动非常不稳定。

$(document).ready(function($) {
  var divUp = $('.fade');
  var divDown = $('.fade-down');
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();
    divUp.css({ 
        'top'     : -(st/6)+"px", 
        'opacity' : 1 - st/400
    });
    divDown.css({
        'opacity' : 1 - st/400
    }); 
  });
});

我单独评论了每个CSS属性，但Chrome无论如何都是不稳定的。 top属性正在移动一个相对定位的元素。

如何在让Chrome的JS引擎满意的同时达到预期的效果？提前感谢您的任何反馈。

Answer 1

您遇到了layout thrashing。

更改元素的top属性会使当前layout无效。通常这会提示浏览器异步重新计算布局（即不是立即）。

但是，请致电scrollTop forces the browser to re-layout synchronously。因为您在滚动事件处理程序中调用它，所以在非常短的时间内重复发生。这种DOM写入读取序列是jank的已知原因。

要提高性能，您需要防止布局颠簸。更改CSS transform（和opacity）属性does not invalidate the browser's layout - 它们只需要composite，这要快得多。

如果您为transform: translateY而不是top设置动画，则浏览器不需要在每个动画帧上计算代价高昂的计算：

divUp.css({ 
  'transform': 'translateY( ' + (-(st/6)) + 'px)', 
  'opacity': 1 - st/400
});

您可以通过设置CSS will-change属性来帮助浏览器优化转换：

.your-div {
  will-change: transform;
}

进一步阅读：

Jank free - 有关改善网络应用性能的文章
CSS Triggers - 列出浏览器在更改每个CSS属性时需要采取的步骤

Chrome中的JQuery scrollTop动画波涛汹涌

1 个答案: