Eine kurze Diskussion über das Laden von Seiten mit JS und Methoden zur Leistungsanalyse. Javascript-Kenntnisse

1. Laden

Laden Sie zuerst die Referenz-JS-Datei der statischen Seite und prüfen Sie dann, ob die Referenzdatei die Onload-Funktion enthält. Finden Sie heraus, ob in Main.js Verweise auf andere JS-Dateien vorhanden sind . Laden Sie zuerst die Referenz-JS-Dateien. Die Ladereihenfolge der referenzierten Dateien stimmt mit der Reihenfolge von main.js überein.
Nachdem der Ladevorgang abgeschlossen ist, beginnt die Ausführung der Onload-Funktion. Da die Ausführungssequenz von js sequentiell ist, besteht der allgemeine Ansatz zur Verbesserung der Seitenantwortgeschwindigkeit darin, die Seite nur beim Laden zu zeichnen. Einige Ereignisbindungsfunktionen, Ajax-Methoden usw. können später geschrieben werden.

2. Analyse der Reaktionsgeschwindigkeit

1. Verwenden Sie Tools zur Analyse

Die Entwicklertools der wichtigsten Browser (Firefox ist mein Favorit) können problemlos die Lade- und Ausführungszeit jeder JS-Datei, HTML-Datei, CSS-Datei und jedes Bildes überprüfen.

2. Hard-Coding-Analyse

Im ersten Schritt können wir grundsätzlich die Flaschenhals-JS-Datei lokalisieren. In der Flaschenhals-JS-Datei können wir die Anweisungen console.time('test') und console.Endtime('test') verwenden, um JS-Funktionen und Codeblöcke einzuklemmen . Ermitteln Sie die Ausführungszeit. Die Konsolenanweisung ist jedoch nur gültig, wenn sie in Nicht-IE-Browsern ausgeführt wird, und unter IE wird ein Fehler gemeldet. Wenn Sie den IE bevorzugen, verwenden Sie Zeitstempel. Beim Kneifen besteht die bequemere Methode darin, die gesamte js-Datei direkt zu kneifen und dann den Firefox-Browser zu verwenden. Drücken Sie F12, um den Zeitverbrauch aller Funktionen und Codeblöcke im Ziel-js in der Konsole anzuzeigen, und Sie können den Engpasscode lokalisieren . bei.