Agencia de SEO Tlajomulco
Agencia de SEO Tlajomulco. Normalmente, en el caso de usar el “async”, el sistema funcionaría como si cargásemos el script tras un “onload” de la página.
<script src=”fichero.js” async>
Otra de las formas sencillas de cargar archivos de forma que no queden bloqueados es a través del uso de JavaScript y elementos del DOM. Para ello podemos usar un sistema bastante sencillo:
var js = document.createElement(‘script’); js.src = ‘fichero.js’; var head = document.getElementsByTagName(‘head’)[0]; head.appendChild(js);
En este caso la carga del JavaScript se hará desde la propia cabecera del sitio y no se incluirá en el pie, como se suele recomendar.
Aunque, otra opción más avanzada sería la de descargar el JavaScript, y, en el momento en el que está descargado el fichero, hacer que el navegador lo cargue y en este momento, si se ha de ejecutar se podría hacer sin necesidad de esperar.
var js = document.createElement(“script”); js.preload = true; js.src = “fichero.js”; //aquí se descarga js.onpreload = function() { document.body.appendChild(script); //aquí se ejecuta };
De la misma forma, aunque no sea con scripts, Firefox tiene limitaciones con los ficheros CSS, de forma que podríamos cargarlos mediante un sistema similar.
var h = document.getElementsByTagName(‘head’)[0]; var link = document.createElement(‘link’); link.href = ‘fichero.css’; link.type = ‘text/css’; link.rel = ‘stylesheet’; h.appendChild(link);
A parte de estos métodos, podemos encontrar dos formas más para cargar archivos en JavaScript que tampoco bloquean la carga. La primera de ellas es utilizando la función setTimeout().
setTimeout(function() { var script = document.createElement(“script”); script.type = “text/javascript”; script.src = “archivo.js”;
WEB PERFORMANCE OPTIMIZATION
document.getElementsByTagName(“head”)[0].appendChild(script); }, 0);
Al cargar el setTimeout() con un tiempo de 0 lo que hacemos es cargarlo en cuando se lea el código de una forma asíncrona.
La otra forma es la carga cuando la ventana se haya acabado de cargar, es decir, cuando se haya acabado de renderizar el código.
window.onload = function() { var script = document.createElement(“script”); script.type = “text/javascript”; script.src = “archivo.js”; document.getElementsByTagName(“head”)[0].appendChild(script); };
Agencia de SEO Tlajomulco.
#Posicionamientoweb #Optimizaciónenbuscadores #SEO