Grundlegende Optimierungsideen für die Größenänderung von Fenstern und Scroll-Events_Javascript-Fähigkeiten

Ein Kollege nutzte das Scroll-Ereignis, um Daten in das Projekt zu laden, aber das Ergebnis war eine Tragödie im IE. Es wird eine einfache Optimierungsmethode mit offensichtlichen Ergebnissen angegeben.

Solange der Benutzer die Fenstergröße ändert, wird die Größe einiger interner Elemente neu berechnet, was dazu führen kann, dass die gesamte Seite neu gerendert wird, was letztendlich viel CPU verbraucht. Wenn beispielsweise die Resize-Methode aufgerufen wird, wird sie kontinuierlich ausgelöst, wenn der Benutzer die Fenstergröße ändert, und niedrigere Versionen des IE können in einen Zustand der angehaltenen Animation fallen. Das Gleiche gilt für das Scroll-Ereignis des Fensters, wenn die Maus scrollt oder die Scroll-Leiste zieht. Wenn zu viele Dinge verarbeitet werden müssen, fallen auch niedrigere Versionen des IE in eine angehaltene Animation.

Grundlegende Optimierungsidee: Führen Sie die Größenänderungsereignisfunktion nur einmal innerhalb eines bestimmten Zeitraums aus.

Code kopieren Der Code lautet wie folgt:

var resizeTimer = null;
$ (window) .on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log ("Fenstergröße ändern");
}, 400);
}
Scroll-Ereignisoptimierung ist das Gleiche.