Cargar Javascript sin bloqueo en el navegador

El tiempo de carga en una página es muy importante para el SEO. Por lo que debemos aplicar técnicas de WPO. Una de las formas de mejorar la carga es evitar bloqueos a la hora de cargar contenidos Javascript en la página. ¿Cómo cargar Javascript sin bloqueo en el navegador?

Hay 5 técnicas que podemos usar para cargar el Javascript sin bloquear el navegador. Es muy interesante para cargar funcionalidad que luego dependerá de eventos del usuario y que no debe entorpecer la carga inicial de la página.

Las 5 técnicas para cargar Javascript sin bloqueo en el navegador

  1. XHR Eval
  2. XHR Injection
  3. Script DOM Element
  4. Script Defer
  5. document.write Script Tag

XHR Eval

Usas XMLHttpRequest (XHR) para obtener el JavaScript, cuando esta cargado ejecutas con eval el contenido en el navegador.

1
2
3
4
5
6
7
8
9
10
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState == 4 && 200 == xhrObj.status )
{
eval(xhrObj.responseText);
}
};
xhrObj.open('GET', 'myScript.js', true);
xhrObj.send('');

XHR Injection

Usas XMLHttpRequest (XHR) para obtener el JavaScript, cuando esta cargado injecta el contenido en un script tag creado dinamicamente ene l head

1
2
3
4
5
6
7
8
9
10
11
12
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState == 4 )
{
var scriptElement = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(scriptElement);
scriptElement.text = xhrObj.responseText;
}
};
xhrObj.open('GET', 'myScript.js', true);
xhrObj.send('');

Script DOM Element

Usa JavaScript para crear un elemento script dado al atributo src la ruta del script extermo a acargar.

1
2
3
4
var scriptElement = document.createElement('script');
scriptElement.src = 'http://example.com/myScript.js';
document.getElementsByTagName('head')
[0].appendChild(scriptElement);

Script Defer

Usa la propiedad defer del elemento script. Además esta soportado por  Internet Explorer. Hace que el navegador no cargue el script inmediatamente.

1
<script defer="" src="myScript.js"></script>

document.write Script Tag

Usa la función de javascript document.write para escribir el script dentro de la página.

1
document.write("<scr"+"ipt type="text/javascript" src="myScript.js"></scr"+"ipt>");

 

Una mejora es que tanto XHR Eval y XHR Injection pueden usar JQuery.ajax para cargarlo pero obliga a que la librería JQuery esté cargada primero. Pero podemos tener una fúnción getXhrObject() para permitir la carga sin usar jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getXhrObject() {
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject) {
var names = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ];
for (var i in names) {
try{
return new ActiveXObject(names[i]);
}catch (e){
//Nothing
}
}
}
return null;
}

Cargar Javascript sin bloqueo en el navegador. Espero que os sirva para mejorar la carga de vuestra página haciendo algo de WPO a vuestras páginas haciendo que el Javascript no bloquee las páginas.

Te interesa

YouTube Rewind 2017: video resumen con los momentos y creadores más virales del año #YoutubeRewind2017

YouTube Rewind 2017: video resumen con los momentos y creadores más virales del año. #YoutubeRewind2017 …

Últimas noticias de Frikipandi.com

Las noticias se actualizan cada 15 minutos.