Heim > Web-Frontend > js-Tutorial > Grundlegende Optimierungsideen für die Größenänderung von Fenstern und Scroll-Events_Javascript-Fähigkeiten

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

WBOY
Freigeben: 2016-05-16 16:50:37
Original
1807 Leute haben es durchsucht

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.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage