Middle
U čemu je razlika u radu režima (async, defer ili type) taga <script>?
sobes.tech АИ
Одговор од АИ
<script> без атрибута
- HTML се парсира до
<script>тега. - Парсирање HTML се зауставља када се открије
<script>тег. - Учитавање скрипте се одвија.
- Извршавање скрипте се одвија.
- Парсирање HTML се наставља након извршења скрипте.
<script async>
- HTML се паралелно учитава са скриптом.
- Парсирање HTML се зауставља након што се скрипта учита.
- Извршавање скрипте се одвија.
- Парсирање HTML се наставља након извршења скрипте.
- редослед извршења
asyncскрипти није гарантован, зависи од брзине учитавања.
<script defer>
- HTML се паралелно учитава са скриптом.
- Скрипта се извршава након што се парсирање HTML заврши, али пре догађаја
DOMContentLoaded. - редослед извршења
deferскрипти је гарантован, одговара редоследу у HTML-у. - Понашање је слично
<script>који је постављен пре затварајућег тега</body>.
<script type="module"> (за ECMAScript модуле)
- Обрађује се као
<script defer>по подразумевано (одложено извршавање након парсирања, одржавање редоследа). - Може се користити са атрибутом
async. - Подржава увоз/извоз модула. Креира посебан опсег видљивости (scope).
| Атрибут | Учитавање скрипте | Извршавање скрипте | Блокирање парсирања HTML | Редослед извршења |
|---|---|---|---|---|
| Нема | Блокирајуће | Блокирајуће | Да | Очувано |
async |
Не блокирајуће (паралелно) | Не блокирајуће (по завршетку учитавања) | Не | Не гарантује се |
defer |
Не блокирајуће (паралелно) | Не блокирајуће (после парсирања HTML) | Не | Очувано |
type="module" |
Не блокирајуће (паралелно) | Не блокирајуће (после парсирања HTML, по подразумевано) | Не | Очувано (по подразумевано) |
// Пример једноставног скрипта
console.log('Обичан скрипт');
// Пример асинхроног скрипта
console.log('Асинхрона скрипта');
// Пример одложеног скрипта
console.log('Одложени скрипт');
// Пример модула
import { someFunction } from './module.js';
someFunction();
console.log('Модул скрипт');