JQuery scrollTop анимация изменчивая в Chrome

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 перемещает относительно позиционированный элемент.

Как я могу достичь желаемого эффекта, пока все еще радует JS-двигатель Chrome? Заранее благодарим за любые отзывы.

Answer 1

Вы испытываете layout thrashing.

Изменение свойства элемента top элемента аннулирует текущий layout. Обычно это побуждает браузер повторно вычислять макет асинхронно (т. Е. Не сразу).

Однако, позвонив по телефону scrollTopforces 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 изменяется