Cargando los JavaScript de forma Asíncrona

Uno de los problemas que podemos encontrar al cargar Javascript es que el navegador deja de renderizar la página mientras hace las peticiones de Javascript. Si cargamos los ficheros dinámicamente mediante Javascript, evitamos el problema y podemos cargar ficheros Javascript de forma asíncrona sin afectar al renderizado de la página. Estos códigos son algunos ejemplos de como se cargan los JS de forma Asíncrona.

En HTML5 ya se ha añadido el atributo async a la etiqueta script.

<script async src="http://ejemplo.com/script.js"></script>

Hasta el momento ese atributo solo es compatible en los navegadores modernos como Firefox, Chrome, Safari, Opera y no es compatible en IE.

Las Redes Sociales también han implementado la carga de JavaScript de forma Asíncrona.

Facebook

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Twitter

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Google +1

<g:plusone annotation="inline"></g:plusone>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

En Github Nicholas Gallagher ofrece una forma eficiente de como cargar varios scripts de forma asíncrona, un todo en uno.

function(doc, script) {
    var js,
        fjs = doc.getElementsByTagName(script)[0],
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            fjs.parentNode.insertBefore(js, fjs);
        };

    // Google Analytics
    add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js', 'facebook-jssdk');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
}(document, 'script'));

Puedes añadirles más botones, aquí un ejemplo con el botón de compartir de Digg.

(function(doc, script) {
    var js, 
        fjs = doc.getElementsByTagName(script)[0],
        frag = doc.createDocumentFragment(),
        add = function(url, id) {
            if (doc.getElementById(id)) {return;}
            js = doc.createElement(script);
            js.src = url;
            id && (js.id = id);
            frag.appendChild( js );
        };
        
    // Google+ button
    add('https://apis.google.com/js/plusone.js');
    // Twitter SDK
    add('//platform.twitter.com/widgets.js');
    // Facebook SDK
    add('//connect.facebook.net/en_US/all.js#xfbml=1');
    // Digg SDK
    add('http://widgets.digg.com/buttons.js');		
    
    fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));

jsFiddle Demo

Pensar de forma asíncrona nos permite optimizar la velocidad de carga de los archivos javascript y al mismo tiempo la de nuestro sitio web de forma considerable.

Recomendado
  • José Ramón

    Hola.

    Pues yo he probado insertando el atributo async a la etiqueta script, y no me funciona.

    El código es

    Que puse justo antes del

    Saludos