Wie kann man WordPress dazu bringen, JavaScript verzögert zu laden, um das Rendern von Seiten zu beschleunigen?

WordPressVerzögertes Laden von JavaScript, um Methoden zum Rendern von Seiten zu beschleunigen.

Was ist die Defer-Eigenschaft von JavaScript?

Jeder kennt diese Situation wahrscheinlich schon:

Es gibt N Skripte im Kopf, und wenn die Skripte geladen sind, wird die Seitenwiedergabe blockiert, die normalerweise leer ist.

Natürlich können wir das umgehen, indem wir das Skript im Quellcode in die Fußzeile einfügen.

Einige komplexe Entwicklungsumgebungen können diese einfache Aufgabe jedoch besonders komplex machen.

An dieser Stelle können wir die Defer-Eigenschaft verwenden, die in JavaScript eine relativ seltene Eigenschaft ist.

Sie werden es vielleicht nie benutzen, aber nachdem Sie diese Einführung gelesen haben, werden Sie es sicher nicht verlassen.

Seine Hauptfunktion besteht darin, das Skript nach dem Laden der gesamten Seite parsen zu lassen, anstatt sie beim Laden zu parsen, was die volle Seitenladegeschwindigkeit für Skripts bietet, die nur ereignisgesteuertes JavaScript enthalten.

Ja, wenn das Script-Tag ein defer-Attribut hat, wird es nach dem Parsen der HTML-Seite ausgeführt, auch wenn es im Head platziert wird, was dem Platzieren des Scripts am Ende der Seite ähnelt.

Natürlich ist auch der Einsatz von Delay begrenzt, achte in der Regel auf 2 Punkte:

1) Rufen Sie den Befehl document.write nicht in einem Skriptblock vom Typ „deferred defer“ auf;

• Weil document.write einen direkten Ausgabeeffekt erzeugt.

2) Verwenden Sie keine globalen Variablen oder Funktionen in Defer-Skripten, einschließlich Skripts mit sofortiger Ausführung.

Fügen Sie dem in WordPress verwendeten Skript das Defer-Attribut hinzu

Wie können wir in WordPress das Defer-Attribut automatisch zu den von WordPress verwendeten Skripten hinzufügen?

Wir können den folgenden Code zur Datei functions.php des aktuellen Designs hinzufügen ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• Der obige Code funktioniert nur gemVon WordPress eingeführter JavaScript-Codewird wirksam sein.

注意 事项

Die Live-Vorschauverwaltung wird möglicherweise leer angezeigt:

Wenn Sie den obigen Code verwenden, wird beim Öffnen der Echtzeitvorschauverwaltung (Darstellung → Anpassen) möglicherweise leer angezeigt. Verwenden Sie ihn daher bitte entsprechend.

Wenn eine Vorschauverwaltung in Echtzeit erforderlich ist, kommentieren Sie den obigen Code aus und löschen Sie den kommentierten Code, nachdem die Anpassung abgeschlossen ist.

Codebeispiel für PHP-Kommentare:

/*

这里是代码 

*/