Skriptlarni sahifaga ulash (async, defer)

Zamonaviy vebsaytlarda skriptlar ko'pincha og'irroq bo'ladi HTML ga qaraganda, ularning yuklash hajmi kattaroq, va anchagina vaqt oladi. Qachonki brauzer HTMLni yuklashni boshlasa va <script>...</script> tegiga duch kelsa, brauzer darhol HTML DOM ni yuklashni to'xtatadi. Bunday holda brauzer script yuklanib olinishini kutadi va keyin jarayonni davom ettrishi mumkin.

Yuqoridagi holat 2 ta muhim muammoni keltirib chiqarishi mumkin

1. Skript o'zidan pastdagi DOMni ko'ra olmaydi

2.Agar kattagina skript bo'lsa foydalanuvchi toki u yuklanguncha kutib o'tiradi

Demak, bunga yechimlardan biri skriptni body tegini oxiriga tashlash kerak

Lekin, buning bir kamchiligi bor, brauzer skriptni aniqlaydi va yuklashni boshlashi mumkin, faqat to'liq HTMl DOM yuklangandan keyin. Endi tasavvur qiling, juda uzun qatorli HTML kod bo'lsa foydalanuvchi anchagina kutib qolishi mumkin.

Omadimizga , 2 ta script attributlari bor bizda, defer va async.

Demak, defer attribute scriptni kuttirib o'tirmaydi HTML yuklanguncha. Brauzer HTML DOMni qurishda davom etadi, defer orqali script esa orqa fonda yuklashni boshlavoradi.

Lekin shuni bilib qo'ying, brauzer agar bizda bir nechta deferli scriptlar bo'lsa barchasini parallel yuklashni boshlaydi

Endi, async attribute haqida gaplashsak, bu attribute mutlaqo mustaqil ishlaydi. Ya'ni u qo'llanganda hech narsani kutmasdan yuklashni boshlab yuboradi

Yuqoridagi misolda, qaysi qaysi script 1-bo'lib yuklanishga harakat qiladi.