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

Question

Скрипт в async загружается после загрузки страницы и (document).ready запускает скрипт в DOM ready, но в чем разница?А что заставляет страницу загружаться быстрее?

<script>   
  $(document).ready(function(){
    //some code
  }); 
</script>

VS

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

Answer 1

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

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

Answer 2

Для

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

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

Этот атрибут нельзя использовать, если атрибут src отсутствует (т. Е. Для встроенных сценариев).Если он включен в этом случае, он не будет иметь никакого эффекта.

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

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

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

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

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