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

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.