Есть ли какая-нибудь разница между document.ready и атрибутом defer?

Question

[Gene Hagmt]

$(document).ready(function() {...});
и
<script defer src='script.js'></script>
Является ли что-то из этого более предпочтительным?

Answer 1

[alex]

defer-скрипты выполняются до того, как выполнится код внутри ready(т.к. .ready() завязан на событии domcontentloaded, то иначе говоря, defer-скрипты выполнятся до тригерринга этого события)

Comments

[Gene Hagmt]

Alex, ок, это понятно. Но если мне нужно, чтобы скрипт выполнялся после того как страница загрузится, имеет ли значение что использовать?

[alex]

Gene Hagmt, по сути нет

Answer 2

[Alex Karo]

Есть еще нюанс:
Скрипт без defer/async, заблокирует загрузку страницы, пока он не будет загружен, распаршен и выполнен. Даже если код в нем запланирован на отложенное выполнение - это замедлит отображение html (если скрипт подключается не в конце страницы)
Тут неплохая статейка в тему https://habr.com/ru/post/323790/

Comments

[Gene Hagmt]

Александр То есть, верно ли я понимаю, что defer предпочтительнее?

[Alex Karo]

Если ничего не путаю - да =)

[Alex Karo]

В принципе, можно просто на скрипт с document.ready навесить defer - порядка выполения это не изменит, а парсинг html блокироваться не будет

Answer 3

[Евгений Вольф]

Есть ли какая-нибудь разница между document.ready и атрибутом defer?

Есть. Document.ready - это событие, а defer - это атрибут асинхронной загрузки скриптов с сохранением порядка их выполнения.

Является ли что-то из этого более предпочтительным?

Я думаю одно другое не может заменить в полной мере и ещё, как мне кажется, если Вы оставите document.ready там же где он и был, не зависимо от того, будет ли использоваться defer или нет, для совместимости и переносимости кода в будущем - это будет оптимальным решением.

Answer 4

[Odisseya]

Разница в последовательности событий:

1. domInteractive
   
2. Запускается defer
   
3. domContentLoaded
   
4. Запускается document.ready
   

Помимо разницы во времени запуска, defer делает загрузку скрипта асинхронной и контролирует порядок выполнения скриптов.