Asíncrono y documento listo

Intento optimizar mis páginas colocando algunos atributos async en mis scripts. Parece romper mi javascript ya que $(document).ready se ejecuta antes de que se carguen todos los scripts.

Vi que puedo resolver mi problema colocando $(window).load lugar de $(document).ready pero me preguntaba si hay una mejor solución. Esta solución desencadena 2 problemas en mi caso:

  1. Tengo que cambiar todo $(document).ready y decirle a todos los desarrolladores que no lo usen más
  2. Los scripts se ejecutarán después de cargar todas las imágenes. Mi sitio web tiene muchas imágenes pesadas y realmente necesito algunos scripts para ejecutarlos lo antes posible después de que dom esté listo.

¿Tienes algunos trucos de magia? Tal vez poniendo todos los guiones al final? utilizar defer lugar de async ?

Después de una extensa investigación, definitivamente puedo decir que poner scripts al final de la página es LA mejor práctica.

Yahoo está de acuerdo conmigo: http://developer.yahoo.com/performance/rules.html#js_bottom

Google no habla sobre esta práctica y parece preferir las secuencias de comandos asíncronas: https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

En mi humilde opinión, poner script al final de la página tiene varios beneficios sobre async / defer:

  • Funcionará para todos los navegadores (sí, incluso IE;))
  • Usted garantiza la orden de ejecución
  • No necesita usar $(document).ready o $(window).load
  • Sus scripts se pueden ejecutar antes de que se carguen sus imágenes
  • Como async / defer, tu página se mostrará más rápido
  • Cuando DOM desencadena el evento listo, se cargan todos los scripts
  • Se puede optimizar combinando todas las js en un archivo sin problemas (con una herramienta como mod_pagespeed)

El único inconveniente que puedo ver es que el navegador no podrá paralelizar las descargas. Una buena razón para usar async / defer en su lugar es cuando tiene una secuencia de comandos que es completamente independiente (no necesita confiar en el orden de ejecución) y que no necesita ejecutarse en un momento específico. Ejemplo: Google Analytics.