Comments 58
pointer-events.
Mac Pro, 2х 6-core Xeon, 64 gb RAM, Google Chrome 31.0.1650.57, OS X. Разницы в производительности нет.
А вот на «хромовых» браузерах разница, хоть и небольшая, но есть. К тому же они даже с включенным pointer-events скролят в разы плавнее, чем FF25
При отключении hover, и промотке страницы скролом, перестают подсвечиваться элементы пока не пошевелишь мышь, при включении — подсвечиваются.
В chrome чуть быстрее, чем без
В IE11 работает очень шустро, разницу не заметил
/Win8.1 64 bit, intel core i5
Некоторые браузеры применяют и к HTML вопреки спецификациям, но далеко не факт, что это будет работать везде и всегда.
Прошло 5+ лет — поддержка pointer-events в браузерах осталась.
разница есть, процентов 5 =)
Однако у меня выключен плавный скролл (терпеть его не могу, возможно даже как раз изза того что тормозит). С ним разница больше, примерно как на видео в шапке. Однако без плавного скролла все быстрее всё равно. Кто придумал плавный скролл и как его отключить глобально у всего человечества знает кто? =))
var body = document.body,
timer,
hover_disabled = false;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if( ! hover_disabled && ! body.classList.contains('disable-hover')) {
body.classList.add('disable-hover');
hover_disabled = true;
}
timer = setTimeout(function(){
body.classList.remove('disable-hover');
hover_disabled = false;
}, 500);
}, false);
Согласен. Хорошее замечание. У меня есть ещё предложения:
- Проверка
classList.contains()бесполезна в тех случаях, когда нужно сделатьclassList.add(). Built-in методaddуже внутри нативно содержит такую проверку, поэтому избыточно делать дважды эту проверку. - Можно не добавлять дополнительную переменную
hover_disabled, а объединить её вместе сtimer. Их логика для данных целей синхронна, поэтому можно удачно их объединить. - Можно не вызывать
clearTimeout()лишний раз, когдаtimerуже отработан.
Вот мой вариант:
var body = document.body,
timer = false;
window.addEventListener('scroll', function() {
if (timer === false) {
body.classList.add('disable-hover');
} else {
clearTimeout(timer);
}
timer = setTimeout(function(){
body.classList.remove('disable-hover');
timer = false;
},500);
}, false);
Мне это кажется или хром теперь по умолчанию себя так ведёт без всяких костылей?
Какая-то оптимизация уже явно появилась в Chrome (v75.0 x64). Но при этом поведение не такое, как с предложенным здесь способом с отключением hover, а заметно лучше. Подсветка (hover) срабатывает значительно реже во время скроллинга. В микро-паузах, пока палец меняет свою позицию над скроллом, успевает сработать подсветка. А самое главное, по окончанию скроллинга элемент, над которым остановился курсор становится подсвеченным — это самое большое отличие не в пользу способа с отключением hover.
В Chrome способ с отключением hover показывает себя лучше по FPS примерно на 10% и возможно в отдельных сценариях он даже сейчас будет уместен.
В FF (v60.8 x32) такой оптимизации не ощущается, либо она там чуть меньше сделана. Способ с отключением hover показывает себя лучше по FPS примерно на 15-20%.
В MS Edge (v44 x64, EdgeHTML v18) такая оптимизация явно есть, при том что она визуально работает почти так же как с отключением hover. Даже при остановке после скролинга hover не срабатывает у элемента находящегося под курсором. Вообще очень похоже. Во время скроллинга hover срабатывает только, если перемещать курсор. Разница по FPS почти незаметна.
В MS IE (v11 x64) примерно так же как в MS Edge.
ЦП: Intel® Core(TM) i5-4200H CPU @ 2.80GHz
ОЗУ: 8,0 ГБ DDR3, 1600 МГц, SODIMM
GPU: Intel® HD Graphics 4600, 2,0 ГБ
Актуально ли это в 2020? Chrome 80 и Safari 13 не генерируют JS- и CSS-события курсора при скролле.
60 FPS? Легко! pointer-events:none!