Как избежать ненужных перерисовок страницы при помощи pointer-events
Чтобы избавиться от лишних перерисовок страницы Пол Льюис советует отключить эффекты страницы при наведении (игнорировать hover) во время прокрутки её пользователем.
При возникновении события scrollstart добавляем к тегу <body> класс disable-hover, внутри которого прописываем pointer-events: none, а при возникновении события scrollend удаляем этот класс по таймеру:
var timer,
class = 'disable-hover',
$body = $('body');
$(window).scroll(function() {
clearTimeout(timer);
if (!$body.hasClass(class)) {
$body.addClass(class);
}
timer = setTimeout(function(){
$body.removeClass(class);
},500);
});
Кратко описываем наш умный класс:
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
И вы на себе почувствуете колоссальный прирост в скорости работы вашего сайта.
Реально работает, интересно, спасибо)
Не за что — сам пользуюсь )