La diferencia es que el primero funcionará incluso si el script se ejecuta después de DOMContentLoaded se haya activado (consulte document.readyState para obtener más información), siempre que agregue la llamada a ready sobre la que preguntó. El segundo no lo hará, porque el evento solo se activa una vez, por lo que si el script se ejecuta después de eso, nunca se llamará a fn .

Entonces, ¿cómo podría ejecutarse el script después de que el evento ya se haya activado? Básicamente, si se agrega dinámicamente, no como parte del HTML inicial del documento. Aquí hay un par de ejemplos de cómo podría ser:

• Un elemento de secuencia de script agregado después de que se haya cargado el documento.
• Un módulo cargado a través de una import() en lugar de una import estática.

Probablemente hay otros.

Además, la versión 1 es una función, mientras que la versión 2 es una instrucción ejecutada. Entonces, debería haber una declaración para la versión 1:

 ready(fn);

Sí, absolutamente correcto.

Debo señalar que no necesita ninguno de los dos si controla cómo se incluye el script en la página. (Por lo tanto, lo necesita en bibliotecas, pero rara vez en aplicaciones/páginas). Si controla cómo se incluye el script en la página y desea que su código se ejecute después de que se haya creado el DOM, aquí hay varias formas en que puede hacerlo. que (en mi humilde opinión, en orden de mejores prácticas):

• Use type="module" en el script para convertirlo en un módulo. Los módulos no se ejecutan hasta que se ha creado el DOM (son módulos autodiferidos, incluso en línea; vea el siguiente punto).
• Use defer en su etiqueta de secuencia de script (solo funciona para etiquetas de secuencias de comandos src que se refieren a archivos, no secuencias de comandos en línea). Los scripts diferidos no se ejecutan hasta que se haya creado el DOM.
• Coloque la etiqueta del script al final del documento, justo antes de la etiqueta de cierre </body> .

Si hace alguna de esas cosas, no es necesario usar ready (jQuery's o los de su pregunta).

La documentación de jQuery tiene la respuesta a su pregunta.

jQuery.ready() :

La mayoría de los navegadores ofrecen una funcionalidad similar en forma de evento DOMContentLoaded . Sin embargo, el método .ready() de jQuery difiere de una manera importante y útil: si el DOM está listo y el navegador DOMContentLoaded antes de que el código llame a .ready( handler ) , el controlador de funciones seguirá ejecutándose. Por el contrario, un detector de eventos DOMContentLoaded agregado después de que se activa el evento nunca se ejecuta...

Entonces su Versión 2 tiene el problema descrito. Mientras que la Versión 1 llama a la función aprobada incluso después de que el documento ya esté listo.