Defer и async са ключовите думи, които се използват при зареждане на скриптове. Проблемът със скриптовете е, че те могат да блокират зареждането на DOM съдържанието и да направят страницата ни заредена бавно, има много решения за това, някои от тях са като зареждане на скриптовете в долната част на страницата, но може да изглежда странно, ако имаме забавяне в мрежата и ние зареждаме нещо от задния край, за да бъде показано на екрана.
Отложете към действие
Какъв атрибут на отлагане го прави, той казва на браузъра да не чака скриптовете да се заредят напълно, вместо това те ще се зареждат във фонов режим и след това да ги стартира, когато DOM е напълно изграден. С помощта на отлагане можем да сме сигурни, че съдържанието на страницата ще се покаже незабавно. Освен това манипулаторът на събития DOMContentLoaded ще изчака, докато отложеният скрипт бъде изтеглен и изпълнен.
Важен акцент относно отлагането
- Браузърът не чака скриптовете, те се зареждат във фонов режим.
- Събитието DOMContentLoaded ще се задейства само след като скриптовете бъдат изтеглени и изпълнени.
- Ако има множество тагове на скрипт с отлагане, тогава браузърът се уверява, че те се изпълняват по ред.
- Отлагането е само за външни скриптове, то се игнорира, ако няма src със скрипта.
Асинхронен в действие
Async е основно същото като defer при неблокиране на DOM съдържанието, докато скриптът не бъде зареден
Важен акцент относно асинхронността
- Браузърът не чака скриптове, той ще зареди скриптовете във фонов режим.
- DOMContentLoad може да се случи преди и след async, няма гаранция.
- Ако има няколко скрипта, тогава няма гаранция кой ще се зареди пръв.
- Async е само за външните скриптове, той се игнорира, ако няма src със скрипта, същото като defer.
Използване на async и defer
- Async може да се използва със самостоятелни скриптове, които не зависят от други, например скрипт за анализ, реклами и т.н.
- Defer се използва за скриптове, които се нуждаят от целия DOM или относителният ред на скриптовете има значение.
