Sahifa: DOMContentLoaded, load, beforeunload, unload

HTML sahifaning hayot sikli (lifecycle) uchta muhim hodisaga ega: DOMContentLoaded — brauzer HTML'ni to'liq yuklab, DOM daraxtini qurganida; load — nafaqat HTML, balki barcha tashqi resurslar (rasm, stil, skript) yuklanganida; beforeunload va unload — foydalanuvchi sahifani tark etayotganida. Har bir hodisa foydali bo'lishi mumkin: DOMContentLoaded — DOM tayyor bo'lgach initsializatsiya qilish uchun, load — barcha resurslar yuklanganini tekshirish uchun, beforeunload/unload — foydalanuvchi ketayotganda o'zgarishlarni saqlash uchun. Bu darsda ularni chuqur o'rganamiz.

DOMContentLoaded

DOMContentLoaded hodisasi document obyektida yuz beradi. Uni kuzatish uchun albatta addEventListenerdan foydalanish kerak:

document.addEventListener('DOMContentLoaded', ready);
// funksiya sifatida yozamiz, chaqirmaymiz: ready() emas, balki ready

Masalan:

<script>
  function ready() {
    alert('DOM tayyor');

    // rasm hali yuklanmagan bo'lishi mumkin (agar keshda bo'lmasa),
    // shu sabab o'lchami 0x0 bo'lishi mumkin
    alert(`Rasm o'lchami: ${img.offsetWidth}x${img.offsetHeight}`);
  }

  document.addEventListener('DOMContentLoaded', ready);
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

Bu misolda DOMContentLoaded ishlaganida hujjat butunlay yuklangan — brauzer barcha HTML elementlarni ko'rgan va ularga qo'l uzata oladi. Lekin rasm (<img>) hali yuklanib ulgurmagan bo'lishi mumkin, shuning uchun uning o'lchami ko'pincha 0x0 chiqadi.

DOMContentLoaded va skriptlar

Brauzer HTML'ni qayta ishlaganda, agar <script> tegiga duch kelsa, DOM qurishni to'xtatib, uni bajarishi shart. Buning sababi bor: skript DOM'ni o'zgartirishi yoki hatto document.write orqali yangi HTML qo'shishi mumkin, shuning uchun brauzer skript tugaguncha kutadi.

Demak, DOMContentLoaded hodisasi skriptlar bajarilib bo'lgach sodir bo'ladi:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    alert('DOM tayyor!');
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

<script>
  alert('Kutubxona yuklandi, kod ishga tayyor');
</script>

Bu misolda avval "Kutubxona yuklandi", so'ng "DOM tayyor!" ko'rsatiladi. Ya'ni DOMContentLoaded barcha skriptlar bajarilishini kutadi.

DOMContentLoaded va stillar

Tashqi stil jadvallari (<link rel="stylesheet">) DOM'ga ta'sir qilmaydi, shuning uchun DOMContentLoaded ularni kutmaydi.

Lekin bir nozik holat bor: agar stildan keyin skript kelsa, u skript stil yuklanguncha kutadi:

<link type="text/css" rel="stylesheet" href="style.css">
<script>
  // skript style.css yuklanmaguncha bajarilmaydi
  alert(getComputedStyle(document.body).marginTop);
</script>

Sababi shundaki: skript elementlarning haqiqiy koordinatalari va boshqa stilga bog'liq xossalarini o'qishga muhtoj bo'lishi mumkin. Shu sababdan skript oldidagi stil to'liq yuklanishini kutadi. Bu esa o'z navbatida DOMContentLoadedni ham kechiktiradi.

Brauzerning avto-to'ldirishi (autofill)

Firefox, Chrome va Opera DOMContentLoaded hodisasida formalarni avtomatik to'ldiradi (autofill). Masalan, agar sahifada login/parol formasi bo'lsa va foydalanuvchi qiymatlarini saqlagan bo'lsa, brauzer DOMContentLoadedda ularni qo'yib chiqadi.

Shuning uchun agar sahifada ko'p yuklanadigan skriptlar tufayli DOMContentLoaded kechiksa, avto-to'ldirish ham kechikadi. Buni foydalanuvchilar sahifa "sekin" ochilayotgandek his qilishi mumkin.

load, unload va readyState

Endi qolgan hodisalarni ko'rib chiqamiz.

window.onload

load hodisasi window obyektida yuz beradi va u barcha resurslar — rasm, stil, skriptlar — yuklanib bo'lgach ishga tushadi:

<script>
  window.onload = function() {
    alert('Sahifa to'liq yuklandi');

    // endi rasm haqiqiy o'lchamiga ega
    alert(`Rasm o'lchami: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

Bu yerda DOMContentLoadeddan farqli o'laroq, rasm yuklangan va uning to'g'ri o'lchamlari ko'rsatiladi.

window.onunload

Foydalanuvchi sahifadan ketganda window obyektida unload hodisasi ishga tushadi. Bu yerda pop-up oynalar ochish kabi kechiktirishga imkon bermaydigan ishlar mumkin emas, lekin analitika ma'lumotlarini yuborish uchun ishlatiladi:

window.addEventListener('unload', function() {
  // ma'lumotni ketishdan oldin yuborish
});

Amaliyotda unloadda tarmoq so'rovlarini yuborish qiyin, chunki sahifa yopilib qolishi mumkin. Buning uchun maxsus navigator.sendBeacon metodi mavjud (quyida ko'ramiz).

document.readyState

document.readyState xossasi hujjatning joriy yuklanish holatini bildiradi. Uning uchta qiymati bor:

• 'loading' — hujjat hali yuklanmoqda;
• 'interactive' — hujjat to'liq o'qildi, DOM tayyor (bu DOMContentLoaded bilan bir vaqtga to'g'ri keladi);
• 'complete' — hujjat va barcha resurslar to'liq yuklandi (bu window.onload bilan bir vaqtga to'g'ri keladi).

Uni tekshirib, holatga qarab ish yuritishimiz mumkin. Ba'zan skript kechroq ishga tushadi va DOMContentLoaded allaqachon o'tib ketgan bo'ladi. Bunday holda hodisani kutish behuda bo'ladi, shuning uchun readyStateni tekshirish kerak:

function work() { /* ... */ }

if (document.readyState == 'loading') {
  // hali yuklanmoqda — hodisani kutamiz
  document.addEventListener('DOMContentLoaded', work);
} else {
  // DOM allaqachon tayyor!
  work();
}

Holatning o'zgarishini kuzatish uchun readystatechange hodisasi ham bor, lekin bu bugungi kunda kam ishlatiladi — DOMContentLoaded va load yetarli:

// joriy holat
console.log(document.readyState);

// har o'zgarishda
document.addEventListener('readystatechange', () => {
  console.log(document.readyState);
});

beforeunload bilan ogohlantirish

Agar foydalanuvchi sahifadan ketmoqchi bo'lsa yoki oynani yopmoqchi bo'lsa, beforeunload ishlovchisi qo'shimcha tasdiqni so'rashi mumkin. Bu ayniqsa foydalanuvchi to'ldirilmagan formani tashlab ketayotganda foydali — "O'zgarishlar saqlanmagan, chindan ham ketmoqchimisiz?" degan savol chiqarish uchun.

Agar biz beforeunload hodisasini bekor qilsak, brauzer foydalanuvchidan tasdiq so'raydi:

window.addEventListener('beforeunload', function(event) {
  event.preventDefault();

  // eski brauzerlar uchun returnValue kerak bo'lishi mumkin
  event.returnValue = '';
});

Muhim nozik jihat: bu ishlovchi faqat foydalanuvchi sahifa bilan o'zaro aloqada bo'lgan (bosgan, matn kiritgan) holatda ishlaydi. Agar foydalanuvchi sahifa bilan hech qanday muloqot qilmasa, ba'zi brauzerlar ogohlantirishni ko'rsatmaydi.

navigator.sendBeacon

Foydalanuvchi sahifadan ketayotganda ko'pincha serverga analitika yoki statistika ma'lumotlarini yuborishimiz kerak bo'ladi. Muammo shundaki, unloadda oddiy fetch yoki XMLHttpRequest so'rovi ko'pincha bekor qilinadi, chunki sahifa yopilib qolyapti.

Bu vazifa uchun maxsus navigator.sendBeacon(url, data) metodi mavjud. U ma'lumotni fon rejimida yuboradi va sahifa yopilsa ham so'rovni yakunlaydi:

let analyticsData = { /* ma'lumotlar obyekti */ };

window.addEventListener('unload', function() {
  navigator.sendBeacon('/analytics', JSON.stringify(analyticsData));
});

• So'rov POST metodi bilan yuboriladi;
• Nafaqat satr, balki forma va boshqa formatlarni ham yuborish mumkin, lekin odatda satrli obyekt yuboriladi;
• Ma'lumot hajmi 64 KB dan oshmasligi kerak;
• So'rov tugaganini kutib bo'lmaydi — sendBeacon hech qanday javob (response) qaytarmaydi va unloadda javobni kutib bo'lmaydi ham.

Xulosa

Sahifa hayot sikli hodisalari:

• DOMContentLoaded (documentda) — DOM tayyor, lekin rasm/stillar hali yuklanmagan bo'lishi mumkin. Skriptlarni kutadi (async va dinamik skriptlardan tashqari). Element bilan ishlashni shu yerda boshlash mumkin;
• load (windowda) — nafaqat DOM, balki barcha tashqi resurslar (rasm, stil) yuklandi. Endi o'lchamlar aniq;
• beforeunload (windowda) — foydalanuvchi ketmoqchi. Bekor qilinsa, brauzer tasdiq so'raydi (matnni maxsuslashtirib bo'lmaydi);
• unload (windowda) — foydalanuvchi deyarli ketdi. Faqat oddiy amallar, ketish ma'lumotini navigator.sendBeacon orqali yuborish mumkin.

document.readyState orqali istalgan paytda holatni tekshirish mumkin: loading, interactive yoki complete. Bu skript kech ishga tushganda DOMContentLoaded o'tib ketgan-ketmaganini bilishga yordam beradi.