Привет .
<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