Sobes.tech
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('Модул скрипт');