He preguntado similar question antes, pero nunca dejé en claro mi punto de vista, o al menos creo que es una pregunta tan relevante que vale la pena mencionarlo y ver si alguien puede dar algunas ideas perspicaces.¿Por qué se recomienda jQuery.ready cuando es tan lento?
Al utilizar jQuery, muchos de nosotros usamos la función jQuery.ready para ejecutar una init cuando el DOM ha cargado. Se ha convertido en la forma estándar de facto de agregar programas de manipulación DOM a una página web usando jQuery. Existe un evento relacionado natively algunos navegadores, pero jQuery lo emula en otros navegadores, como algunas versiones de IE. Ejemplo:
<head>
<script>
var init = function() { alert('hello world'); };
$.ready(init);
</script>
Ahora, todas nuestras pruebas muestran que este evento puede ser bastante lento. No es tan lento como window.onload, pero a menudo todavía tiene una demora de 100 ms antes de la ejecución. Si FF puede ser de hasta 200-300 ms, especialmente en la actualización.
Estos son algunos milisegundos muy importantes, porque esta es la cantidad de tiempo que se muestra el diseño inicial antes de realizar cualquier manipulación DOM (como ocultar un menú desplegable). Muchas veces, un "parpadeo" de diseño se debe principalmente al uso de un evento lento preparado para DOM, lo que obliga a los programadores a ocultar elementos mediante CSS en lugar de hacerlo potencialmente menos accesibles.
Ahora bien, si en lugar colocamos una función init en una etiqueta de script antes de cerrar la etiqueta del cuerpo, que se ejecutará mucho más rápido, por lo general alrededor de la mitad del tiempo, pero a veces incluso más rápido:
<head>
<script>
var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>
Una página sencilla prueba eso demuestra las diferencias: http://jsbin.com/aqifon/10
Quiero decir, no estamos hablando de diferencias apenas perceptibles ya que algunos de los "optimizadores de la policía" promueven cuando se trata de usar selectores efectivos. Estamos hablando de algunas demoras mayores al realizar cargas de manipulación DOM. Al probar este ejemplo en FF, domready a veces puede ser más de 100 veces más lento (300 ms frente a 2 ms).
Ahora a mi pregunta: ¿Por qué se recomienda usar jQuery.ready cuando es obviamente mucho más lento que otras alternativas? ¿Y cuáles son los inconvenientes de llamar al init antes de cerrar el CUERPO contra el uso de jQuery.ready? Podría decirse que es más "seguro" usar domReady, pero ¿en qué contexto es más seguro que la otra opción? (Estoy pensando cosas como document.write y scripts diferidos) Hemos utilizado la forma BODY durante casi 5 años en muchos sitios de clientes, y nunca nos encontramos con ningún problema. Es mucho más rápido.
También me pregunto, dado que hay tanta confusión acerca de jsPerf y la optimización de los selectores por un par de ms por cada 10.000 ejecuciones, ¿cómo es que no se habla mucho de esto? Básicamente es la primera demora que enfrenta el usuario, y parece ser bastante simple dividir 50-100 ms en cada carga de página ...
Sí, este argumento podría ser etiquetado 'conveniencia' y eso es justo lo suficiente. Probablemente se podría disparar los enlaces jQuery.ready al final de la costura plantilla aunque ... – David