Com fer que WordPress carregui JavaScript per accelerar la representació de la pàgina?

WordPressCàrrega mandrosa de JavaScript per accelerar els mètodes de representació de pàgines.

Quina és la propietat Defer de JavaScript?

Segurament tothom s'ha trobat amb aquesta situació:

Hi ha N scripts al capçal i, quan es carreguen els scripts, es bloqueja la representació de la pàgina, que normalment està en blanc.

Per descomptat, podem evitar-ho posant l'script al codi font al peu de pàgina.

Tanmateix, alguns entorns de desenvolupament complexos poden fer que aquesta tasca senzilla sigui especialment complexa.

En aquest punt podem utilitzar la propietat Defer, que és una propietat relativament rara a JavaScript.

Potser no l'utilitzeu mai, però després de llegir aquesta introducció, estic segur que no la deixareu.

La seva funció principal és permetre que l'script s'analitzi després de carregar tota la pàgina, en lloc d'analitzar-la durant la càrrega, la qual cosa proporciona velocitat de càrrega completa de la pàgina per als scripts que només contenen JavaScript activat per esdeveniments.

Sí, si l'etiqueta de l'script té un atribut diferit, s'executarà després d'analitzar la pàgina HTML encara que es col·loqui al capçal, cosa que és semblant a posar l'script a la part inferior de la pàgina.

Per descomptat, l'ús del retard també és limitat, normalment presteu atenció a 2 punts:

1) No crideu l'ordre document.write en un bloc d'script de tipus ajornat diferit;

• Perquè document.write produirà un efecte de sortida directe.

2) No utilitzeu variables o funcions globals als scripts Defer, inclosos els scripts d'execució immediata.

Afegiu l'atribut Defer a l'script utilitzat a WordPress

A WordPress, com podem afegir automàticament l'atribut Defer als scripts utilitzats per WordPress?

Podem afegir el codi següent al fitxer functions.php del tema actual ▼

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

• El codi anterior només funciona, segonsCodi JavaScript introduït per WordPressserà efectiu.

注意 事项

La gestió de previsualització en directe pot mostrar-se en blanc:

Si utilitzeu el codi anterior, quan obriu la gestió de la vista prèvia en temps real (Aparença → Personalitza), pot ser que es mostri en blanc, així que si us plau, utilitzeu-lo segons correspongui.

Quan calgui gestionar la vista prèvia en temps real, comenta el codi anterior i suprimeix el codi comentat un cop finalitzada la personalització.

Exemple de codi de comentari PHP:

/*

这里是代码 

*/