Maison  >  Article  >  interface Web  >  Idées d'optimisation de base pour le redimensionnement et le défilement des fenêtres compétences event_javascript

Idées d'optimisation de base pour le redimensionnement et le défilement des fenêtres compétences event_javascript

WBOY
WBOYoriginal
2016-05-16 16:50:371746parcourir

Un collègue a utilisé l'événement scroll pour charger des données dans le projet, mais le résultat a été une tragédie dans IE. Une méthode d'optimisation simple est donnée avec des résultats évidents.

Tant que l'utilisateur modifie la taille de la fenêtre, la taille de certains éléments internes sera recalculée, ce qui peut entraîner un nouveau rendu de la page entière, consommant finalement beaucoup de CPU. Par exemple, lorsque la méthode de redimensionnement est appelée, elle sera continuellement déclenchée lorsque l'utilisateur modifie la taille de la fenêtre, et les versions inférieures d'IE peuvent tomber dans un état d'animation suspendue. La même chose est vraie pour l'événement de défilement de la fenêtre. Lorsque la souris fait défiler ou fait glisser la barre de défilement, l'événement de défilement sera déclenché en continu. S'il y a trop de choses à traiter, les versions inférieures d'IE tomberont également en animation suspendue.

Idée d'optimisation de base : n'exécutez la fonction d'événement de redimensionnement qu'une seule fois au cours d'une certaine période de temps.

Copier le code Le code est le suivant :

var resizeTimer = null; (window) .on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log ("redimensionnement de la fenêtre");
}, 400);
}
);

L'optimisation des événements de défilement est la même.
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn