✅Ответ на #ВопросСподвохом от ментора по JavaScript!
1.
Поясняю: Когда браузер загружает HTML и доходит до тега <script>...</script>, он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами <script src="..."></script>: браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.
1️⃣async: Порядок загрузки (кто загрузится первым, тот и сработает). Может выполниться до того, как страница полностью загрузится. Такое случается, если скрипты маленькие или хранятся в кэше, а документ достаточно большой.
2️⃣defer: Порядок документа (как расположены в документе). Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded.
...поэтому сначала исполнится скрипт 1, поскольку он первый в очереди и по скорости загрузки. Далее 2, потому что у него скорость загрузки такая же быстрая — 1 секунда. Загрузка асинхронно — вне очереди, 3 скрипт загружается за 1,5 секунды и выполняется сразу после загрузки, затем 4 скрипт загружается в порядке очереди и по скорости 2 секунды, последние скрипты — 5, 6, 7. Они загружаются в конце и в порядке очереди размещения в DOM.
1.
<script src="script-2.js"></script> // Время загрузки скрипта 1s
2. <script async src="script-6.js"></script> // Время загрузки скрипта 1s
3. <script async src="script-1.js"></script> // Время загрузки скрипта 1.5s
4. <script src="script-5.js"></script> // Время загрузки скрипта 2s
5. <script defer src="script-3.js"></script> // Время загрузки скрипта 3s
6. <script defer src="script-4.js"></script> // Время загрузки скрипта 1.5s
7. <script defer src="script-7.js"></script> // Время загрузки скрипта 0.1s
Поясняю: Когда браузер загружает HTML и доходит до тега <script>...</script>, он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами <script src="..."></script>: браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.
1️⃣async: Порядок загрузки (кто загрузится первым, тот и сработает). Может выполниться до того, как страница полностью загрузится. Такое случается, если скрипты маленькие или хранятся в кэше, а документ достаточно большой.
2️⃣defer: Порядок документа (как расположены в документе). Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded.
...поэтому сначала исполнится скрипт 1, поскольку он первый в очереди и по скорости загрузки. Далее 2, потому что у него скорость загрузки такая же быстрая — 1 секунда. Загрузка асинхронно — вне очереди, 3 скрипт загружается за 1,5 секунды и выполняется сразу после загрузки, затем 4 скрипт загружается в порядке очереди и по скорости 2 секунды, последние скрипты — 5, 6, 7. Они загружаются в конце и в порядке очереди размещения в DOM.