Recientemente leí el manifiesto de Yahoo sobre las mejores prácticas para acelerar su sitio web . Recomiendan poner la inclusión de JavaScript en la parte inferior del código HTML cuando podamos.
¿Pero dónde y cuándo exactamente?
¿Debemos ponerlo antes </html>o después del cierre ? Y sobre todo, ¿cuándo deberíamos ponerlo todavía en la <head>sección?
Respuestas:
Hay dos posibilidades para scripts verdaderamente discretos:
</body></html>)El segundo puede ser más rápido, ya que la investigación original de Yahoo mostró que algunos navegadores intentan cargar archivos de secuencia de comandos cuando presionan la etiqueta de secuencia de comandos y, por lo tanto, no cargan el resto de la página hasta que hayan terminado. Sin embargo, si su script tiene una parte 'lista' que debe ejecutarse tan pronto como el DOM esté listo, es posible que deba tenerlo en la cabeza. Otro problema es el diseño: si su secuencia de comandos va a cambiar el diseño de la página, desea que se cargue lo antes posible para que su página no pierda mucho tiempo redibujándose frente a sus usuarios.
Si el sitio de script externo está en otro dominio (como widgets externos), puede valer la pena colocarlo en la parte inferior para evitar que retrase la carga de la página.
Y para cualquier problema de rendimiento, haga sus propios puntos de referencia : lo que puede ser cierto en un momento en el que se realiza un estudio, puede cambiar con su propia configuración local o cambios en los navegadores.
Nunca es tan sencillo: Yahoo recomienda colocar los scripts justo antes de la </body>etiqueta de cierre , lo que creará la ilusión de que la página se carga más rápido en un caché vacío (ya que los scripts no bloquearán la descarga del resto del documento). Sin embargo, si tiene algún código que desea ejecutar al cargar la página, solo comenzará a ejecutarse después de que se haya cargado toda la página. Si coloca los scripts en la <head>etiqueta, comenzarán a ejecutarse antes, por lo que en un caché preparado, la página parecería cargarse más rápido.
Además, el privilegio de poner scripts al final de la página no siempre está disponible. Si necesita incluir scripts en línea en sus vistas que dependen de una biblioteca o de algún otro código JavaScript que se haya cargado antes, debe cargar esas dependencias en la <head>etiqueta.
En general, las recomendaciones de Yahoo son interesantes, pero no siempre aplicables y deben considerarse caso por caso.
<script>etiquetas en línea no implican un javascript intrusivo.
<script>Las etiquetas están separadas del marcado y se pueden usar con código que mejora la interfaz, pero no es obligatorio. De modo que no hay nada intrínsecamente molesto en las <script>etiquetas en línea .
<script>etiquetas para codificar esos valores en variables de JavaScript, para usar tal vez con edición en línea u otro comportamiento similar.
Como han dicho otros, colóquelo antes de las etiquetas html del cuerpo de cierre .
El otro día recibimos numerosas llamadas de clientes quejándose de que sus sitios eran extremadamente lentos. Los visitamos localmente y descubrimos que tardaban entre 20 y 30 segundos en cargar una sola página. Pensando que los servidores estaban funcionando mal, iniciamos sesión, pero tanto los servidores web como los SQL tenían una actividad de ~ 0%.
Después de unos minutos, nos dimos cuenta de que un sitio externo estaba inactivo, al que estábamos vinculando para las etiquetas de seguimiento de JavaScript. Este navegadores destinadas estaban golpeando la escritura de la etiqueta en la cabeza de la sección de la página y esperar a descargar el archivo de script.
Por lo tanto, para los scripts externos / de terceros al menos, recomendaría ponerlos como lo último en la página. Luego, si no estuvieran disponibles, el navegador al menos cargaría la página hasta ese punto, y el usuario lo ignoraría.
Para resumir, basado en las sugerencias anteriores:
</body> etiqueta.</body> menos que tenga una razón de caso límite para colocar los scripts en la cabeza.Si desea modificar la posición de sus scripts, YSlow es una gran herramienta para darle una idea de si va a mejorar o dañar el rendimiento. Poner javascript en ciertas posiciones de documentos puede realmente matar los tiempos de carga de la página.
No, no debería ser posterior a la </html>ya que sería inválido. El mejor lugar para colocar los scripts es justo antes del</body>
Esto se debe básicamente a que la mayoría de los navegadores dejan de mostrar la página mientras evalúan el script que usted proporciona. Por lo tanto, está bien colocar código sin bloqueo en cualquier lugar de la página (estoy pensando principalmente en cosas que adjuntan funciones al onLoadevento, ya que el enlace de eventos es tan rápido que efectivamente es gratuito). Un gran asesino aquí es al comienzo de la página que se coloca en un script del servidor de anuncios, lo que puede evitar que la página se cargue antes de que los anuncios se hayan descargado por completo, lo que hace que los tiempos de carga de su página se disparen.
Si lo coloca en la parte inferior, se carga al final, lo que acelera la velocidad a la que el usuario puede ver la página. Tiene que estar antes de la final, </html>aunque de lo contrario no será parte del DOM.
Sin embargo, si el código se necesita instantáneamente, póngalo en la cabeza.
Es mejor poner cosas como widgets de blog en la parte inferior para que si no se cargan, no afecte la usabilidad de la página.