Diferencia entre window.onload y $(document).ready()

Cuando se trata de ejecutar código una vez que la página web ha cargado, dos métodos comunes son window.onload y $(document).ready(). A continuación, explicamos sus diferencias, con ejemplos reales y una comparación de rendimiento.

window.onload

El evento window.onload se ejecuta cuando todo el contenido de la página se ha cargado, incluyendo imágenes, scripts y hojas de estilo CSS. Solo se puede asignar una función al evento onload.

window.onload = function() {
  console.log('Página completamente cargada');
};

En términos de rendimiento, window.onload puede retrasarse si hay contenido pesado en la página, ya que espera a que todos los elementos estén completamente cargados antes de ejecutarse.

$(document).ready()

$(document).ready() es un método en jQuery que se ejecuta cuando el DOM (Document Object Model) está completamente cargado y listo para ser manipulado, pero antes de que se carguen todas las imágenes y otros recursos pesados.

$(document).ready(function() {
  console.log('DOM completamente cargado y parseado');
});

Esto significa que $(document).ready() suele ser más rápido que window.onload, ya que no espera a que se carguen todos los elementos de la página.

Ejemplos con comparación de rendimiento

Consideremos un escenario donde tenemos una imagen grande en la página. Podemos comparar cómo window.onload y $(document).ready() difieren en su tiempo de ejecución.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <img src="big-image.jpg" />

  <script>
    window.onload = function() {
      console.log('window.onload: Página completamente cargada');
    };

    $(document).ready(function() {
      console.log('$(document).ready(): DOM completamente cargado y parseado');
    });
  </script>
</body>
</html>

En este ejemplo, $(document).ready() probablemente se ejecutará antes que window.onload, porque espera a que el DOM esté listo pero no a que se cargue la imagen grande.

Conclusión

  • window.onload espera a que todo el contenido de la página esté completamente cargado, incluyendo imágenes y otros recursos.
  • $(document).ready() se ejecuta cuando el DOM está listo, lo cual es generalmente más rápido.
  • window.onload puede ser más lento en páginas con muchos recursos pesados.
  • $(document).ready() es más adecuado para inicializar scripts que no dependen de imágenes o recursos externos.

Recursos

jQuery
jquery.com
jQuery
load - Referencia de la API Web | MDN
El evento load se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.
developer.mozilla.org
load - Referencia de la API Web | MDN