3 minutos de lectura ( 548 palabras)

Usando async y defer para mejorar la carga de scripts en Joomla

Usando async y defer para mejorar la carga de scripts en Joomla

Una buena práctica a la hora de crear una web, es la de situar los scripts al final del documento, justo antes de la etiqueta "</body>", lo cual permite poder visualizar la página antes de cargar estos componentes. Pero, ¿y si el script debe ser cargado en el "<head>" o en cualquier otra parte? Y lo que es más importante en nuestro caso, ¿Y si el documento HTML es generado de forma dinámica y no podemos modificar directamente las etiquetas "<script>"?.

Antes de entrar en materia me gustaría explicar un poco que son y cómo se usan las propiedades async y defer. Ambas son atributos de la etiqueta <script> y se usan para mejorar la carga de los scripts indicando cuando se van a ejecutar estos. La primera es una nueva incorporación de HTML5 que nos permite ejecutar el script de forma asíncrona, es decir, tan pronto como esté disponible, mientras que la segunda (disponible desde la versión 4.01 de HTML)  lo que hace es cargar el script al final del documento, una vez que todo lo demás se ha cargado.

La sintaxis para estos atributos en un documento html normal y corriente sería algo así: 

<script async src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script defer src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Otro dato importante es que solo pueden usarse si el atributo src está presente, por lo que solo sirven para ejecutar archivos externos, lo cual no supone mayor problema puesto que se puede, y ademas es más eficiente, pasar todos los scripts a un archivo js aparte. 

Ahora que ya sabemos de que estamos hablando vamos al objeto del artículo. ¿Qué pasa cuando las etiquetas <script> se generan de forma dinámica y no podemos añadir estos atributos directamente?, como es el caso de Joomla. La solución es muy simple.

Para cargar un script en Joomla se suele usar la siguiente sentencia:

$document->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');

Al usar esta función se genera una etiqueta <script> en la cabecera del documento HTML que carga el archivo de forma normal, es decir, cuando el navegador llega a esta línea se detiene a cargar el archivo javascript y no sigue cargando el resto de la web hasta que no ha terminado. 

Por suerte podemos tener más control sobre la ejecución de scripts si realizamos la siguiente modificación:

$document->addScript(‘http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', 'text/javascript"  defer="false" async="true');

Donde,  jugando con los valores booleanos (true, false),  podremos seleccionar ejecutar de forma asíncrona (async) o al final del documento (defer).

¡Ojo! Muy importante respetar las comillas simples y dobles, no estan puestas asi por error, si las modificamos el código no funciona y la pagina no se muestra.

Por otro lado, en el ejemplo anterior  he usado una librería situada en otro servidor, pero a la hora de ponernos a modificar como cargan scripts nuestras extensiones, tendremos algo más parecido a esto:

$document->addScript(JURI::root().'modules/el_modulo_que_sea/tmpl/js/archivo.js', 'text/javascript"  defer="false" async="true');

Que viene a ser lo mismo pero cambiando la direccion del archivo javascript, que en este caso seria la ruta base (JURI::root()) de nuestro servidor,  más la ruta donde se encuentra el archivo js dentro de modules.

Conclusión

Así es como se puede controlar la carga de scripts en Joomla, ahora solo es cuestión de rebuscar en los archivos que conforman cada una de las extensiones que usamos para localizar donde cargan los scripts y hacer que se ejecuten cuando nosotros queramos.

0
Resoluciones Joomla! para el 2014
Plugin de autentificación doble
 

Comentarios

¿Ya està registrado? Ingresa Aquí
No hay comentarios por el momento. Sé el primero en enviar un comentario.

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/