Come rendere JavaScript lazy load di WordPress per accelerare il rendering della pagina?

WordPressCaricamento lento di JavaScript per velocizzare i metodi di rendering della pagina.

Che cos'è la proprietà Defer di JavaScript?

Probabilmente tutti hanno riscontrato questa situazione:

Ci sono N script nell'intestazione e quando gli script vengono caricati, il rendering della pagina viene bloccato, che di solito è vuoto.

Naturalmente, possiamo aggirare questo problema inserendo lo script nel codice sorgente nel piè di pagina.

Tuttavia, alcuni ambienti di sviluppo complessi possono rendere questo semplice compito particolarmente complesso.

A questo punto possiamo usare la proprietà Defer, che è una proprietà relativamente rara in JavaScript.

Potresti non usarlo mai, ma dopo aver letto questa introduzione, sono sicuro che non lo lascerai.

La sua funzione principale è consentire allo script di analizzare dopo che l'intera pagina è stata caricata, invece di analizzarla al caricamento, il che fornisce la velocità di caricamento dell'intera pagina per gli script che contengono solo JavaScript attivato da eventi.

Sì, se il tag di script ha un attributo di rinvio, verrà eseguito dopo aver analizzato la pagina HTML anche se è posizionato nell'intestazione, il che è simile a mettere lo script in fondo alla pagina.

Naturalmente, anche l'uso del ritardo è limitato, di solito fai attenzione a 2 punti:

1) Non chiamare il comando document.write in un blocco di script di tipo differito;

• Perché document.write produrrà un effetto di output diretto.

2) Non utilizzare variabili o funzioni globali negli script di differimento, inclusi gli script di esecuzione immediata.

Aggiungi l'attributo Defer allo script utilizzato in WordPress

In WordPress, come possiamo aggiungere automaticamente l'attributo Defer agli script utilizzati da WordPress?

Possiamo aggiungere il seguente codice al file functions.php del tema corrente ▼

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

• Il codice sopra funziona solo, secondoCodice JavaScript introdotto da WordPresssarà efficace.

注意 事项

La gestione dell'anteprima dal vivo potrebbe essere vuota:

Se utilizzi il codice sopra, quando apri la gestione dell'anteprima in tempo reale (Aspetto → Personalizza), potrebbe essere visualizzato vuoto, quindi utilizzalo come appropriato.

Quando è richiesta la gestione dell'anteprima in tempo reale, commentare il codice sopra ed eliminare il codice commentato una volta completata la personalizzazione.

Esempio di codice di commento PHP:

/*

这里是代码 

*/