В чем разница между document.ready и async?

За

<script async>   
    //some code
</script>

атрибут async будет проигнорирован, потому что async - это только значимый, когда <script> имеет атрибут src:

This attribute must not be used if the src attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect.

Итак, <script async> в вашем вопросе заблокирует синтаксический анализ HTML после обнаружения тега - он вообще не будет работать асинхронно.

Если тег сценария сделал имеет src, то тег async загрузит сценарий асинхронно (синтаксический анализ HTML не заблокирован), а затем выполнит сценарий, как только сценарий будет загружен (независимо от того, была ли страница загружена первой). . См. здесь

$(document).ready(function(){ требует, чтобы событие DOMContentLoaded сработало до запуска содержащей его функции, а DOMContentLoaded запустится только после того, как HTML будет полностью проанализирован (хотя не обязательно до того, как все Ресурсы будут загружены, например изображения и т. д.).

Таким образом, сценарий async с тегом src может выполняться раньше, чем $(document).ready(function(){.

Обратите внимание, что есть тег defer, который является почти то же самое как $(document).ready(function(){ - сценарий с тегом defer (и src) запускает прямо перед, когда запускается событие DOMContentLoaded.

Согласно MDN, асинхронный режим не действует для встроенного тега скрипта, поэтому тот факт, что сработал, вероятно, означает, что скрипт находится внизу html.

document.ready - это устаревший способ, которым jQuery позволяет создавать прослушиватель DOMContentLoaded, и лучше сделать jQuery(function($) {...} и включить в него код.