2009-07-10 15 views
12

Me pregunto si es posible cargar javascript de una manera que no bloquee la experiencia del usuario. No estoy seguro de cómo lograr lo mismo, pero estoy buscando una solución de navegador cruzado. Me pregunto si alguien puede guiarme en la dirección correcta. Colocar el js en la parte inferior de la página no funciona demasiado bien.Javascript sin bloqueo

Gracias por su tiempo.

+0

Blargh, que tenía un muy buen enlace para esto, pero no puedo encontrarlo – Greg

+0

Aclaración necesaria: estás hablando carga de javascript recursos de archivos como en las etiquetas '

2

Creo que puede usar Trabajadores, pero parece estar implementado en FF3.5, pero pocos más.

Ver http://hacks.mozilla.org/2009/07/working-smarter-not-harder/

+0

Una pequeña búsqueda de Google en "onload Javascript" proporciona mucha información, en páginas como http://onlinetools.org/articles/unobtrive/spanish/chapter4.html. –

+0

¡No te olvides de Gears! También tiene trabajadores web. –

+1

¿Sí? Fui demasiado perezoso para mencionarlo, pero está en el artículo señalado. –

2

Cuando se carga una página sólo se puede descargar 2 javascript archivos en paralelo en un momento dado lo que tratar de mantener el número de archivos javascript abajo y su tamaño abajo (con Minificación, obsfucation y gzipping) ayudará con la experiencia de carga.

El uso de devoluciones de llamada en su javascript también ayudará con los elementos que no sean bloqueantes cuando se esté ejecutando javascript.

Un ejemplo de jQuery sería

$('#id').click(function(){ 
    $.post('url',data,function(callbackdata){//do something 
     }); 

}); 
3

Citando this answer:

Javascript solicitudes de recursos se de hecho bloqueando, pero hay maneras alrededor de este (a saber: DOM inyecta etiquetas script en la cabeza, y AJAX solicitudes) que sin ver la página yo mismo es probable que sea lo que está pasando aquí.

Incluyendo varias copias de un mismo recurso JS es muy mala, pero no necesariamente fatal, y es típico de sitios más grandes, que podrían haber sido acreción del trabajo de equipos separados, o simplemente vieja mala codificación, planificación o mantenimiento.

En cuanto a la recomendación de yahoo a lugar las secuencias de comandos en la parte inferior del cuerpo , esto mejora percibida de respuesta veces, y puede mejorar la carga real veces en un grado (porque todos los recursos anteriores se les permite asíncrono primero), pero nunca será tan eficaz como solicitudes de bloqueo (aunque vienen con una alta barrera de capacidad técnica).

Puede consultar una entrada del blog de YUI sobre Non-Blocking Javascript.

0

Deferring execution of JavaScript puede ser una muy buena solución si tiene algún JavaScript que no es crítico para haber cargado inmediatamente.

+0

esto es por ejemplo, solo –

+1

No, esto es compatible con todos los navegadores convencionales: http://www.webkit.org/blog/1395/running-scripts-in-webkit/ http: //hacks.mozilla .org/2009/06/defer / – mikl

1

setTimeout con un pequeño retraso permitirá que su flujo de control continúe mientras programa otra función para ejecutar más tarde. Esto es especialmente útil para evitar que la IU se bloquee o dependa inadvertidamente de la ejecución exitosa de la otra función.

Me resulta muy útil evitar que los errores de javascript interfieran con los eventos enlazados. Por ejemplo, para instalar un controlador de enviar en un formulario:

$('#form').submit(function() { 
    setTimeout(function() { 
    // Submit handler function, i.e. do an ajax submission of the form 
    $.ajax(...etc...); 
    }, 1); 
    // Return false before the handler executes, ensuring the form won't manually submit 
    // in the event of a js error in the handler 
    return false; 
}); 
-1

Tener un vistazo a este jQuery plugin (http://code.google.com/p/funky-jq-plugins/wiki/nonblocking).

Su objetivo es utilizar temporizadores para emular un entorno de subprocesos múltiples donde el subproceso de interfaz de usuario no se congela mediante operaciones exigentes como la iteración en listas largas. materia muy fresca ... Lo escribí :)

Ciao por ahora