0

Привет .

<head>
<script src="1.js" async="async"></script>
</head>
<body> 
<p>content</p>

1.js

console.log(   $("p").length  ) 

Элементов не будет найдено поскольку скрипт выполнится до отрисовки DOM . Если использовать

<script src="1.js" defer></script>

То в консоле будет доступ к DOM.

В чём разница между выполнением скрипта при событии DOMContentLoader, использование атрибута defer со вставкой в <head> и подключением скрипта в конец <body> ?

defer == DOMCONTENTLOADER ?

Вопрос про порядок загрузки скриптов

Первое — браузер гарантирует, что относительный порядок скриптов с defer будет сохранён.

То есть, в таком коде (с async) первым сработает тот скрипт, который раньше загрузится:

<script src="1.js" async></script>
<script src="2.js" async></script>

А в таком коде (с defer) первым сработает всегда 1.js, а скрипт 2.js, даже если загрузился раньше, будет его ждать.

<script src="1.js" defer></script>
<script src="2.js" defer></script>

Но на практике у меня это с атрибутом async не потверждается

1.js

for(var i =0;i<1000000000;i++){
    j++
}

console.log('finish 1.js');

2.js

for(var i =0 ;i<800;i++){
    j++
}
console.log('finish 2.js');

Файл 2.js по идее должен подгрузится раньше и выполнится тоже но у меня в консоле результ

 finish 1.js
 finish 2.js

1 ответ 1

2

На вашем примере этого видно не будет, потому что каждый файл это не отдельный модуль или поток, это программный код и выполняться он будет в определенном порядке (загрузки), а не параллельно ... п.э. ожидать что 2.js отработает раньше 1.js нельзя.

Далее... Скрипты подключают в конце <body>, что бы загрузка оных не задерживала от рисовку самой страницы. Отсюда и разница ...

2
  • А можете представить пример где это будет видно ?
    – zloctb
    24 ноя 2015 в 8:38
  • 1
    Ну попробуйте загрузить 1.js в 10000 строк и 2.js в пару строк не с локальной машины ... результат думаю увидите ... 24 ноя 2015 в 8:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.