Eae pessoal, navegando pela internet encontrei um tópico muito interessante em um blog americano e resolvi compartilhar a informação com vocês!!
Até hoje nunca havia me preocupado com FPS no navegador, foi quando li algumas informações que em computadores lentos isso pode atrapalhar bastante no desempenho, tornando as páginas extremamente lentas neles.. Enfim, existem diversas possibilidades para resolver isso, uma bem bacana é desativar os efeitos :hover quando estivermos dando um scroll na página! Vejam o seguinte vídeo:
Notem a diferença entre os dois efeitos.. Um é o browser agindo normalmente, outro é usando o efeito que vamos aprender neste tópico!!
Nosso objetivo é desativar todos os efeitos em hover da página enquanto fazemos um scroll, para isso é necessário conciliar o CSS com o Javascript.
O CSS com essa propriedade
Quando essa propriedade recebe o valor none ela faz com que o elemento meio que deixe de existir no documento, cancelando qualquer interação com o mesmo..
Mas ele sozinho não seria suficiente para o efeito que desejamos!! Para isso vamos usar o seguinte Javascript
O que ele faz simplesmente é adicionar a class "disable-hover" ao body da nossa página quando damos um scroll nela!!
Então adicionamos o seguinte CSS para que tudo funcione perfeitamente:
Bem simples não é? Mas vejam o ganho de desempenho no vídeo no inicio do tópico!!
Espero que seja útil!!
Fonte: http://www.thecssninja.com/javascript/pointer-events-60fps
Até hoje nunca havia me preocupado com FPS no navegador, foi quando li algumas informações que em computadores lentos isso pode atrapalhar bastante no desempenho, tornando as páginas extremamente lentas neles.. Enfim, existem diversas possibilidades para resolver isso, uma bem bacana é desativar os efeitos :hover quando estivermos dando um scroll na página! Vejam o seguinte vídeo:
Notem a diferença entre os dois efeitos.. Um é o browser agindo normalmente, outro é usando o efeito que vamos aprender neste tópico!!
Nosso objetivo é desativar todos os efeitos em hover da página enquanto fazemos um scroll, para isso é necessário conciliar o CSS com o Javascript.
O CSS com essa propriedade
- Código:
pointer-events: none
Quando essa propriedade recebe o valor none ela faz com que o elemento meio que deixe de existir no documento, cancelando qualquer interação com o mesmo..
Mas ele sozinho não seria suficiente para o efeito que desejamos!! Para isso vamos usar o seguinte Javascript
- Código:
var body = document.body,
timer;
window.addEventListener('scroll', function() {
clearTimeout(timer);
if(!body.classList.contains('disable-hover')) {
body.classList.add('disable-hover')
}
timer = setTimeout(function(){
body.classList.remove('disable-hover')
},500);
}, false);
O que ele faz simplesmente é adicionar a class "disable-hover" ao body da nossa página quando damos um scroll nela!!
Então adicionamos o seguinte CSS para que tudo funcione perfeitamente:
- Código:
.disable-hover,
.disable-hover * {
pointer-events: none !important;
}
Bem simples não é? Mas vejam o ganho de desempenho no vídeo no inicio do tópico!!
Espero que seja útil!!
Fonte: http://www.thecssninja.com/javascript/pointer-events-60fps