Jak sprawić, by WordPress leniwie ładował JavaScript, aby przyspieszyć renderowanie strony?

WordPress wykorzystuje leniwe ładowanie JavaScript w celu przyspieszenia renderowania stron.

Co to jest właściwość Defer w JavaScript?

Każdy prawdopodobnie spotkał się z taką sytuacją:

W nagłówku znajduje się N skryptów, a po załadowaniu skryptów renderowanie strony jest blokowane, która zwykle jest pusta.

Oczywiście możemy obejść ten problem, umieszczając skrypt w kodzie źródłowym w stopce.

Jednak niektóre złożone środowiska programistyczne mogą sprawić, że to proste zadanie będzie szczególnie złożone.

W tym momencie możemy użyć właściwości Defer, która jest stosunkowo rzadką właściwością w JavaScript.

Możesz go nigdy nie używać, ale po przeczytaniu tego wstępu jestem pewien, że go nie opuścisz.

Jego główną funkcją jest umożliwienie przeanalizowania skryptu po załadowaniu całej strony, zamiast analizowania go podczas ładowania, co zapewnia pełną prędkość ładowania strony w przypadku skryptów zawierających tylko JavaScript wyzwalany zdarzeniami.

Tak, jeśli tag skryptu ma atrybut odroczenia, zostanie wykonany po przeanalizowaniu strony HTML, nawet jeśli jest umieszczony w nagłówku, co jest podobne do umieszczania skryptu na dole strony.

Oczywiście stosowanie opóźnienia jest również ograniczone, zwykle zwracaj uwagę na 2 punkty:

1) Nie wywołuj polecenia document.write w bloku skryptu typu deferred defer;

• Ponieważ document.write przyniesie bezpośredni efekt wyjściowy.

2) Nie używaj globalnych zmiennych ani funkcji w skryptach odroczenia, w tym skryptów do natychmiastowego wykonania.

Dodaj atrybut Defer do skryptu używanego w WordPress

Jak w WordPressie możemy automatycznie dodać atrybut Defer do skryptów używanych przez WordPressa?

Możemy dodać następujący kod do pliku functions.php bieżącego motywu ▼

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";
};

• Powyższy kod działa tylko wedługKod JavaScript wprowadzony przez WordPressbędzie skuteczne.

注意 事项

Zarządzanie podglądem na żywo może wyświetlać puste:

Jeśli użyjesz powyższego kodu, po otwarciu zarządzania podglądem w czasie rzeczywistym (Wygląd → Dostosuj), może być wyświetlany pusty, więc użyj go odpowiednio.

Gdy wymagane jest zarządzanie podglądem w czasie rzeczywistym, skomentuj powyższy kod i usuń komentowany kod po zakończeniu dostosowywania.

Przykładowy kod komentarza PHP:

/*

这里是代码 

*/