Cum să faci WordPress să încarce JavaScript pentru a accelera redarea paginii?

WordPressÎncărcare leneră a JavaScript pentru a accelera metodele de redare a paginii.

Ce este proprietatea Defer a JavaScript?

Probabil că toată lumea s-a confruntat cu această situație:

Există N scripturi în cap, iar atunci când scripturile sunt încărcate, randarea paginii este blocată, care este de obicei goală.

Desigur, putem ocoli acest lucru punând scriptul în codul sursă în subsol.

Cu toate acestea, unele medii complexe de dezvoltare pot face această sarcină simplă deosebit de complexă.

În acest moment, putem folosi proprietatea Defer, care este o proprietate relativ rară în JavaScript.

S-ar putea să nu-l folosești niciodată, dar după ce ai citit această introducere, sunt sigur că nu o vei părăsi.

Funcția sa principală este de a lăsa scriptul să se analizeze după ce întreaga pagină este încărcată, în loc să o analizeze la încărcare, ceea ce oferă o viteză completă de încărcare a paginii pentru scripturile care conțin numai JavaScript declanșat de evenimente.

Da, dacă eticheta de script are un atribut defer, aceasta va fi executată după analizarea paginii HTML chiar dacă este plasată în cap, ceea ce este similar cu punerea scriptului în partea de jos a paginii.

Desigur, utilizarea întârzierii este, de asemenea, limitată, de obicei acordați atenție la 2 puncte:

1) Nu apelați comanda document.write într-un bloc de script de tip amânat;

• Deoarece document.write va produce efect direct de ieșire.

2) Nu utilizați variabile sau funcții globale în scripturile Defer, inclusiv orice scripturi de execuție imediată.

Adăugați atributul Defer la scriptul folosit în WordPress

În WordPress, cum putem adăuga automat atributul Defer la scripturile utilizate de WordPress?

Putem adăuga următorul cod la fișierul functions.php al temei curente ▼

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

• Codul de mai sus funcționează numai, conformCod JavaScript introdus de WordPressva fi eficient.

注意 事项

Gestionarea previzualizării live poate fi necompletată:

Dacă utilizați codul de mai sus, atunci când deschideți gestionarea previzualizării în timp real (Aspect → Personalizare), acesta poate fi necompletat, așa că vă rugăm să-l utilizați după caz.

Când este necesară gestionarea previzualizării în timp real, comentați codul de mai sus și ștergeți codul comentat după finalizarea personalizării.

Exemplu de cod de comentariu PHP:

/*

这里是代码 

*/