¿Cómo hacer que WordPress cargue de forma diferida JavaScript para acelerar la representación de la página?

WordPressLazy loading de JavaScript para acelerar los métodos de representación de páginas.

¿Qué es la propiedad Defer de JavaScript?

Probablemente todo el mundo se ha encontrado con esta situación:

Hay N secuencias de comandos en el encabezado y, cuando se cargan las secuencias de comandos, se bloquea la representación de la página, que suele estar en blanco.

Por supuesto, podemos solucionar esto colocando el script en el código fuente en el pie de página.

Sin embargo, algunos entornos de desarrollo complejos pueden hacer que esta simple tarea sea particularmente compleja.

En este punto, podemos usar la propiedad Defer, que es una propiedad relativamente rara en JavaScript.

Puede que nunca lo uses, pero después de leer esta introducción, estoy seguro de que no lo dejarás.

Su función principal es permitir que la secuencia de comandos analice después de cargar toda la página, en lugar de analizarla durante la carga, lo que proporciona una velocidad de carga de página completa para las secuencias de comandos que solo contienen JavaScript activado por eventos.

Sí, si la etiqueta del script tiene un atributo diferido, se ejecutará después de analizar la página HTML incluso si se coloca en el encabezado, lo que es similar a colocar el script en la parte inferior de la página.

Por supuesto, el uso de la demora también está limitado, por lo general, preste atención a 2 puntos:

1) No llame al comando document.write en un bloque de script de tipo deferido diferido;

• Porque document.write producirá un efecto de salida directo.

2) No utilice variables o funciones globales en los scripts de Defer, incluidos los scripts de ejecución inmediata.

Agregue el atributo Defer al script utilizado en WordPress

En WordPress, ¿cómo podemos agregar automáticamente el atributo Defer a los scripts utilizados por WordPress?

Podemos agregar el siguiente código al archivo 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 código anterior solo funciona, segúnCódigo JavaScript introducido por WordPressserá efectivo.

注意 事项

Live Preview Management puede mostrarse en blanco:

Si usa el código anterior, cuando abra la administración de vista previa en tiempo real (Apariencia → Personalizar), puede mostrarse en blanco, así que utilícelo según corresponda.

Cuando se requiera la administración de la vista previa en tiempo real, comente el código anterior y elimine el código comentado después de completar la personalización.

Ejemplo de código de comentario de PHP:

/*

这里是代码 

*/