¿Dónde está el mejor lugar para poner JavaScript / Ajax en un documento?

Disculpas por la pregunta que suena tonta, pero necesito que los expertos aclaren.

De los tres lugares para poner Javascript, head , $(document).ready o body , ¿cuál sería el mejor lugar para poner algo de ajax que use muchas funciones de $GET ?

Por ejemplo, estoy usando una función de JavaScript llamada execute_send() pero no estoy seguro de cuál sería el mejor lugar para execute_send() . A continuación se muestra el error:

Problem at line 67 character 22: 'execute_send' was used before it was defined. function execute_send() {

Además, ¿cómo afecta la ubicación al tiempo de carga de la página?

En general, a menos que por alguna razón lo necesite en otro lugar, ponga todos sus JS en el cuerpo. El navegador no continuará hasta que haya analizado su JS, por lo que es bueno dejar que la página se cargue primero. Consulte http://developer.yahoo.com/performance/rules.html

Como ejemplo de cuándo es posible que realmente desee poner JS en la cabeza: Es posible que tenga algún código de prueba A / B que desee ejecutar antes de que la página se muestre, en ese caso, el código debería ir en la cabeza, porque Realmente quiero que se ejecute lo antes posible.

Como dijo @Thom Blake, en general, el mejor lugar está en la parte inferior del (+1 para eso), pero lo ampliaré un poco:

La razón de esto es que a medida que el navegador carga la página, tiene que detener la carga y analizar el JavaScript cuando lo encuentra. Entonces, si tiene todos sus scripts en por ejemplo, habrá un retraso en la carga de todo el contenido en

Tenga en cuenta que este es un retraso en la carga, separado de la ejecución real del script. Algo como $(document).ready() ocupa de cuándo se ejecuta el script, no cuando se carga.

En general, todo esto es importante porque usted quiere que una página web se sienta lo más receptiva posible, por lo que una lista de mejores prácticas para JavaScript generalmente estará en esta línea:

  1. Coloque todos sus scripts en la parte inferior del para que la carga de recursos que no son JS, como las imágenes, no se retrase.

  2. Combine sus scripts en un solo archivo, de modo que el servidor tenga que realizar menos solicitudes de recursos (verá que esto se conoce como “minimizar las solicitudes HTTP”)

  3. Minimice sus scripts, para reducir su tamaño total, lo que acelera los tiempos de carga

  4. Coloque cualquier código que dependa del DOM (por ejemplo, controladores de clics, manipulación de HTML, etc.) dentro de $(document).ready() (o el método equivalente para la biblioteca JS en uso en la página).

El mismo tema: qué-pros-y-contras-poner-javascript-en-cabeza-y-poner-justo-antes-el-cuerpo

En el pasado, experimenté algunos problemas de jQuery si no se había ‘cargado’ al inicializar … por eso decidimos insertarlo en el .

En algunas situaciones no es fácil mover los scripts al final. Si, por ejemplo, el script usa document.write para insertar parte del contenido de la página, no se puede mover más abajo en la página. También puede haber problemas de scope. En muchos casos, hay formas de solucionar estas situaciones.

Para el rest de los javascripts, todos antes de la etiqueta de cierre .

Para explicar el ‘Por qué la página se cargará más rápido’: No lo hará.

Los navegadores son de un solo hilo, por lo que es comprensible que, mientras se ejecuta una secuencia de comandos, el navegador no puede iniciar otras descargas. Pero no hay razón para que, mientras se descarga el script, el navegador no pueda comenzar a descargar otros recursos. Y eso es exactamente lo que han hecho los navegadores más nuevos, incluidos Internet Explorer 8, Safari 4 y Chrome 2.

La diferencia es visible: sus recursos dentro de la etiqueta se cargarán / mostrarán secuencialmente. Cuando el navegador puede cargar el archivo completo debe cargarse antes de que el navegador pueda buscar otro recurso. Entonces, es una ilusión, porque el navegador cargará / di más contenido 'visible' antes de 'javascripts'.

Para visualizar todo el asunto: firebug> Net (pestaña)

Como se dijo antes, $(document).ready no es un lugar. (Para jQuery, $(document).ready simplemente garantiza que el DOM esté completamente cargado (listo para manipular) antes de que se ejecute cualquier script). Debería colocar su JavaScript en el o el .

Sin embargo, colocar todos sus archivos JavaScript y JavaScripts en la parte inferior de la sección es lo mejor para el rendimiento de carga. “Procesamiento progresivo” y “Descarga paralela” están bloqueados para todo lo que está debajo de los scripts. Si tus scripts son lo último en la página, no estás bloqueando nada.

Este artículo lo explica con más profundidad.

Ejemplo: