Как избежать ненужных перерисовок страницы при помощи 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;
}

И вы на себе почувствуете колоссальный прирост в скорости работы вашего сайта.

Источник: https://www.kobzarev.com/makeup/kak-izbezhat-nenuzhnih-pererisovok-stranitsi-pri-pomoshhi-pointer-events/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий