Hoy, ha caido Google, y todos sus servicios, aunque parezca irreal e improbable,… ha pasado. Y el problema es que no solo han caido los servicios de Google Mail, Google Maps, … sinó que todas las páginas que usan sus servicios. Por poner un ejemplo, en el trabajo hemos estado unos minutos estresados mirando el por que nuestra aplicación no terminaba de cargar, y al darnos cuenta de que Google estaba caido hemos caido en el problema, y menudo problema.
El problema era que estamos llamando a Google Maps en <head /> de la aplicación, algo realmente lógico partiendo de que es lugar en el que meter la lógica de nuestra aplicación. Por desgracia, cuando el servicio está innaccesible o lento, esto produce un tiempo de espera considerablemente largo. Para ello, la solución es hacer un buen desarrollo que no dependa del Javascript de ese servicio y además, incluirlo en la parte inferior de la página, justo antes de </body>.
Con la llegada de servicios como Ajax Libraries, este problema se acentúa ya que estamos delegando el framework JS a Google, y si este cae, todo lo que tenemos montado para él, dejará de funcionar.
Importante recordar, que los scripts ajenos a la aplicación, osea ubicados en un servidor externo debería estar justo antes del cierre de <body> y así, nos ahorramos problemas de carga innecesarios como los de hoy.
<script type="text/javascript" src="mi-script-en-google.js"></script>
</body>Posible solución a un problema así
Bueno, se me ocurre una solución sencilla para comprobar si el servició está disponible y en caso de no estarlo, ofrecer una alternativa.
var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC de Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
if (typeof jQuery == 'function') return;
var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC local
sc.src = 'https://www.anieto2k.com/wp-content/themes/anieto2k08/js/jquery-1.2.6.min.js';
document.getElementsByTagName("head")[0].appendChild(sc);
// Tiempo en milisegundos que estimamos pueda tardar.
}, 200);
sc.onload = sc.onreadystatechange = function(e){
clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);Sin duda, la mejor opción siempre es tenerlo alojado en tu servidor. Pero si por algún motivo esto no es posible, quizás te pueda ayudar.
17 comentarios, 4 referencias
+
#