JavaScript WeakRef: Zaif havolalar va xotirani tejaydigan obyektlarni boshqarish

JavaScript dinamik veb-ilovalarni yaratish uchun kuchli til bo'lsa-da, xotirani boshqarish uchun avtomatik axlat yig'ishga (garbage collection) tayanadi. Bu qulaylikning o'ziga yarasha narxi bor: dasturchilar ko'pincha obyektlarning qachon xotiradan o'chirilishini cheklangan darajada nazorat qila oladilar. Bu, ayniqsa, katta hajmdagi ma'lumotlar yoki uzoq muddat mavjud bo'ladigan obyektlar bilan ishlaydigan murakkab ilovalarda kutilmagan xotira sarfi va unumdorlik muammolariga olib kelishi mumkin. Bu yerda WeakRef — obyektlarning hayot sikli ustidan batafsilroq nazoratni ta'minlash va xotira samaradorligini oshirish uchun kiritilgan mexanizm yordamga keladi.

Kuchli va zaif havolalarni tushunish

WeakRef ga sho'ng'ishdan oldin, kuchli va zaif havolalar tushunchasini tushunib olish juda muhim. JavaScript'da kuchli havola — bu obyektlarga havola qilishning standart usuli. Obyektga kamida bitta kuchli havola ishora qilib tursa, axlat yig'uvchi uning xotirasini bo'shatmaydi. Obyekt erishish mumkin bo'lgan deb hisoblanadi. Masalan:

            let myObject = { name: "Example" }; // myObject kuchli havolani saqlaydi
let anotherReference = myObject; // anotherReference ham kuchli havolani saqlaydi

            

              
                Copy
              
            
          

Bu holda, { name: "Example" } obyekti myObject yoki anotherReference mavjud bo'lgunicha xotirada qoladi. Agar biz ikkalasini ham null ga o'rnatgan bo'lsak:

            myObject = null;
anotherReference = null;

            

              
                Copy
              
            
          

Obyekt erishib bo'lmaydigan holatga keladi va axlat yig'ish uchun nomzod bo'ladi.

Boshqa tomondan, zaif havola — bu obyektning axlat yig'uvchi tomonidan o'chirilishiga to'sqinlik qilmaydigan havola. Axlat yig'uvchi obyektga faqat zaif havolalar ishora qilayotganini aniqlasa, u obyekt xotirasini bo'shatishi mumkin. Bu sizga obyektni endi faol ishlatilmaganda xotiradan o'chirilishiga to'sqinlik qilmasdan kuzatib borish imkonini beradi.

JavaScript WeakRef bilan tanishish

WeakRef obyekti sizga obyektlarga zaif havolalar yaratish imkonini beradi. U ECMAScript spetsifikatsiyasining bir qismi bo'lib, zamonaviy JavaScript muhitlarida (Node.js va zamonaviy brauzerlarda) mavjud. U quyidagicha ishlaydi:

            let myObject = { name: "Important Data" };
let weakRef = new WeakRef(myObject);

console.log(weakRef.deref()); // Obyektga kirish (agar u axlat yig'uvchi tomonidan o'chirilmagan bo'lsa)

            

              
                Copy
              
            
          

Keling, bu misolni tahlil qilaylik:

• Biz myObject obyektini yaratamiz.
• Biz myObject ga ishora qiluvchi WeakRef nusxasi bo'lgan weakRef ni yaratamiz. Eng muhimi, `weakRef` `myObject` ning axlat yig'ilishiga to'sqinlik qilmaydi.
• WeakRef ning deref() metodi havola qilingan obyektni olishga harakat qiladi. Agar obyekt hali xotirada bo'lsa (axlat yig'ilmagan bo'lsa), deref() obyektni qaytaradi. Agar obyekt axlat yig'uvchi tomonidan o'chirilgan bo'lsa, deref() undefined qiymatini qaytaradi.

Nima uchun WeakRef dan foydalanish kerak?

WeakRef ning asosiy qo'llanilish holati — bu obyektlar ilovaning boshqa qismlarida kerak bo'lmaganda axlat yig'ilishiga to'sqinlik qilmaydigan ma'lumotlar tuzilmalari yoki keshlarni yaratishdir. Quyidagi stsenariylarni ko'rib chiqing:

• Keshlar: Katta ilova tez-tez hisoblash uchun qimmat bo'lgan ma'lumotlarga kirishi kerakligini tasavvur qiling. Kesh bu natijalarni unumdorlikni oshirish uchun saqlashi mumkin. Biroq, agar kesh bu obyektlarga kuchli havolalarni saqlasa, ular hech qachon axlat yig'uvchi tomonidan o'chirilmaydi, bu esa potentsial xotira sizib chiqishiga (memory leaks) olib keladi. Keshda WeakRef dan foydalanish, ilova tomonidan faol ishlatilmay qolganda, keshdagi obyektlarni axlat yig'uvchi tomonidan qayta ishlashiga imkon beradi va xotirani bo'shatadi.
• Obyektlar assotsiatsiyasi: Ba'zan asl obyektni o'zgartirmasdan yoki uning axlat yig'ilishiga to'sqinlik qilmasdan obyekt bilan metama'lumotlarni bog'lash kerak bo'ladi. WeakRef bu bog'liqlikni saqlab qolish uchun ishlatilishi mumkin. Masalan, o'yin dvigatelida siz o'yin obyekti sinfini to'g'ridan-to'g'ri o'zgartirmasdan fizik xususiyatlarni o'yin obyektlari bilan bog'lashni xohlashingiz mumkin.
• DOM manipulyatsiyasini optimallashtirish: Veb-ilovalarda Hujjat Obyekt Modeli (DOM) bilan ishlash qimmatga tushishi mumkin. Zaif havolalar DOM elementlari endi kerak bo'lmaganda ularning DOMdan olib tashlanishiga to'sqinlik qilmasdan kuzatish uchun ishlatilishi mumkin. Bu, ayniqsa, dinamik kontent yoki murakkab foydalanuvchi interfeysi (UI) o'zaro ta'sirlari bilan ishlaganda foydalidir.

FinalizationRegistry: Obyektlar qachon yig'ib olinishini bilish

WeakRef zaif havolalar yaratishga imkon bersa-da, obyekt haqiqatda axlat yig'uvchi tomonidan o'chirilganda xabardor bo'lish mexanizmini ta'minlamaydi. Bu yerda FinalizationRegistry yordamga keladi. FinalizationRegistry obyekt axlat yig'uvchi tomonidan o'chirilgandan *so'ng* bajariladigan qayta chaqiruv (callback) funksiyasini ro'yxatdan o'tkazish usulini taqdim etadi.

            let registry = new FinalizationRegistry(
  (heldValue) => {
    console.log("Saqlangan qiymati " + heldValue + " bo'lgan obyekt axlat yig'uvchi tomonidan o'chirildi.");
  }
);

let myObject = { name: "Ephemeral Data" };
registry.register(myObject, "myObjectIdentifier");

myObject = null; // Obyektni axlat yig'ish uchun nomzod qiling
//FinalizationRegistry'dagi qayta chaqiruv myObject axlat yig'uvchi tomonidan o'chirilgandan keyin bir muncha vaqt o'tgach bajariladi.

            

              
                Copy
              
            
          

Bu misolda:

• Biz konstruktoriga qayta chaqiruv funksiyasini uzatib, FinalizationRegistry nusxasini yaratamiz. Bu qayta chaqiruv registrda ro'yxatdan o'tgan obyekt axlat yig'uvchi tomonidan o'chirilganda bajariladi.
• Biz myObject ni registrda saqlangan qiymat ("myObjectIdentifier") bilan birga ro'yxatdan o'tkazamiz. Saqlangan qiymat qayta chaqiruv funksiyasi bajarilganda unga argument sifatida uzatiladi.
• Biz myObject ni null ga o'rnatamiz, bu esa asl obyektni axlat yig'ish uchun nomzod qiladi. E'tibor bering, qayta chaqiruv darhol bajarilmaydi; u axlat yig'uvchi obyekt xotirasini bo'shatgandan keyin bir muncha vaqt o'tgach sodir bo'ladi.

WeakRef va FinalizationRegistry ni birlashtirish

WeakRef va FinalizationRegistry ko'pincha murakkabroq xotirani boshqarish strategiyalarini yaratish uchun birgalikda ishlatiladi. Masalan, siz WeakRef dan foydalanib, obyektlarning axlat yig'ilishiga to'sqinlik qilmaydigan kesh yaratishingiz mumkin, so'ngra FinalizationRegistry dan foydalanib, ular o'chirilganda o'sha obyektlar bilan bog'liq resurslarni tozalashingiz mumkin.

            let registry = new FinalizationRegistry(
  (key) => {
    console.log(key + " kaliti uchun resurs tozalanmoqda: ");
    // Bu yerda tozalash amallarini bajaring, masalan, ma'lumotlar bazasi ulanishlarini bo'shatish
  }
);

class Resource {
  constructor(key) {
    this.key = key;
    // Resursni egallash (masalan, ma'lumotlar bazasi ulanishi)
    console.log(key + " kaliti uchun resurs olinmoqda: ");
    registry.register(this, key);
  }

  release() {
    registry.unregister(this); // Agar qo'lda bo'shatilsa, finalizatsiyani oldini olish
    console.log(this.key + " kaliti uchun resurs qo'lda bo'shatilmoqda.");
  }
}

let resource1 = new Resource("resource1");

//... Keyinroq, resource1 endi kerak emas
resource1.release();

let resource2 = new Resource("resource2");
resource2 = null; // GC uchun nomzod qilish. Tozalash oxir-oqibat FinalizationRegistry orqali sodir bo'ladi

            

              
                Copy
              
            
          

Bu misolda:

• Biz konstruktorida resursni egallaydigan va o'zini FinalizationRegistry bilan ro'yxatdan o'tkazadigan Resource sinfini aniqlaymiz.
• Resource obyekti axlat yig'uvchi tomonidan o'chirilganda, FinalizationRegistry dagi qayta chaqiruv bajariladi, bu bizga olingan resursni bo'shatish imkonini beradi.
• `release()` metodi resursni aniq bo'shatish va uni registrdan o'chirish usulini taqdim etadi, bu esa finalizatsiya qayta chaqiruvining bajarilishini oldini oladi. Bu resurslarni deterministik tarzda boshqarish uchun juda muhimdir.

Amaliy misollar va qo'llash holatlari

1. Veb-ilovada rasmlarni keshlash

Ko'p sonli rasmlarni ko'rsatadigan veb-ilovani ko'rib chiqing. Unumdorlikni oshirish uchun siz bu rasmlarni xotirada keshlashni xohlashingiz mumkin. Biroq, agar kesh rasmlarga kuchli havolalarni saqlasa, ular ekranda ko'rsatilmasa ham xotirada qoladi, bu esa ortiqcha xotira sarfiga olib keladi. WeakRef xotirani tejaydigan rasm keshini yaratish uchun ishlatilishi mumkin.

            class ImageCache {
  constructor() {
    this.cache = new Map();
  }

  getImage(url) {
    const weakRef = this.cache.get(url);
    if (weakRef) {
      const image = weakRef.deref();
      if (image) {
        console.log(url + " uchun kesh topildi");
        return image;
      }
      console.log(url + " uchun kesh muddati tugadi");
      this.cache.delete(url); // Muddati o'tgan yozuvni o'chirish
    }
    console.log(url + " uchun kesh topilmadi");
    return this.loadImage(url);
  }

  async loadImage(url) {
    // URL'dan rasm yuklashni simulyatsiya qilish
    await new Promise(resolve => setTimeout(resolve, 100));
    const image = { url: url, data: url + " uchun rasm ma'lumotlari" };
    this.cache.set(url, new WeakRef(image));
    return image;
  }
}

const imageCache = new ImageCache();

async function displayImage(url) {
  const image = await imageCache.getImage(url);
  console.log("Rasm ko'rsatilmoqda: " + image.url);
}

displayImage("image1.jpg");
displayImage("image1.jpg"); //Kesh topildi
displayImage("image2.jpg");

            

              
                Copy
              
            
          

Ushbu misolda, ImageCache sinfi rasm obyektlariga ishora qiluvchi WeakRef nusxalarini saqlash uchun Map dan foydalanadi. Rasm so'ralganda, kesh avval uning xaritada mavjudligini tekshiradi. Agar mavjud bo'lsa, u deref() yordamida rasmni olishga harakat qiladi. Agar rasm hali xotirada bo'lsa, u keshdan qaytariladi. Agar rasm axlat yig'uvchi tomonidan o'chirilgan bo'lsa, kesh yozuvi o'chiriladi va rasm manbadan yuklanadi.

2. DOM elementlarining ko'rinishini kuzatish

Yagona sahifali ilovada (SPA), siz DOM elementlarining ko'rinishini kuzatib, ular ko'rinadigan yoki ko'rinmaydigan bo'lganda ma'lum harakatlarni bajarishni xohlashingiz mumkin (masalan, rasmlarni kechiktirib yuklash, animatsiyalarni ishga tushirish). DOM elementlariga kuchli havolalardan foydalanish, ular DOMga biriktirilmagan bo'lsa ham ularning axlat yig'ilishiga to'sqinlik qilishi mumkin. WeakRef ushbu muammoni oldini olish uchun ishlatilishi mumkin.

            class VisibilityTracker {
  constructor() {
    this.trackedElements = new Map();
  }

  trackElement(element, callback) {
    const weakRef = new WeakRef(element);
    this.trackedElements.set(element, { weakRef, callback });
  }

  observe() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        this.trackedElements.forEach(({ weakRef, callback }, element) => {
          const trackedElement = weakRef.deref();
          if (trackedElement === element && entry.target === element) {
            callback(entry.isIntersecting);
          }
        });
      });
    });

    this.trackedElements.forEach((value, key) => {
      observer.observe(key);
    });
  }
}

//Foydalanish misoli
const visibilityTracker = new VisibilityTracker();

const element1 = document.createElement("div");
element1.textContent = "Element 1";
document.body.appendChild(element1);

const element2 = document.createElement("div");
element2.textContent = "Element 2";
document.body.appendChild(element2);


visibilityTracker.trackElement(element1, (isVisible) => {
  console.log("Element 1 ko'rinmoqda: " + isVisible);
});

visibilityTracker.trackElement(element2, (isVisible) => {
  console.log("Element 2 ko'rinmoqda: " + isVisible);
});

visibilityTracker.observe();

            

              
                Copy
              
            
          

Bu misolda, VisibilityTracker sinfi DOM elementlari qachon ko'rinadigan yoki ko'rinmaydigan bo'lishini aniqlash uchun IntersectionObserver dan foydalanadi. U kuzatilayotgan elementlarga ishora qiluvchi WeakRef nusxalarini saqlaydi. Kesishish kuzatuvchisi ko'rinishdagi o'zgarishni aniqlaganida, u kuzatilayotgan elementlar bo'ylab aylanib chiqadi va element hali ham mavjudligini (axlat yig'ilmaganligini) va kuzatilgan element kuzatilayotgan elementga mos kelishini tekshiradi. Agar ikkala shart ham bajarilsa, u tegishli qayta chaqiruvni bajaradi.

3. O'yin dvigatelida resurslarni boshqarish

O'yin dvigatellari ko'pincha teksturalar, modellar va audio fayllar kabi ko'p sonli resurslarni boshqaradi. Bu resurslar sezilarli miqdorda xotira egallashi mumkin. WeakRef va FinalizationRegistry bu resurslarni samarali boshqarish uchun ishlatilishi mumkin.

            class Texture {
  constructor(url) {
    this.url = url;
    // Tekstura ma'lumotlarini yuklash (simulyatsiya qilingan)
    this.data = url + " uchun tekstura ma'lumotlari";
    console.log("Tekstura yuklandi: " + url);
  }

  dispose() {
    console.log("Tekstura yo'q qilindi: " + this.url);
    // Tekstura ma'lumotlarini bo'shatish (masalan, GPU xotirasini bo'shatish)
    this.data = null; // Xotirani bo'shatishni simulyatsiya qilish
  }
}

class TextureCache {
  constructor() {
    this.cache = new Map();
    this.registry = new FinalizationRegistry((texture) => {
      texture.dispose();
    });
  }

  getTexture(url) {
    const weakRef = this.cache.get(url);
    if (weakRef) {
      const texture = weakRef.deref();
      if (texture) {
        console.log("Tekstura keshi topildi: " + url);
        return texture;
      }
      console.log("Tekstura keshi muddati tugadi: " + url);
      this.cache.delete(url);
    }

    console.log("Tekstura keshi topilmadi: " + url);
    const texture = new Texture(url);
    this.cache.set(url, new WeakRef(texture));
    this.registry.register(texture, texture);
    return texture;
  }
}

const textureCache = new TextureCache();

const texture1 = textureCache.getTexture("texture1.png");
const texture2 = textureCache.getTexture("texture1.png"); //Kesh topildi

//... Keyinroq, teksturalar endi kerak emas va axlat yig'ish uchun nomzod bo'ladi.

            

              
                Copy
              
            
          

Bu misolda, TextureCache sinfi Texture obyektlariga ishora qiluvchi WeakRef nusxalarini saqlash uchun Map dan foydalanadi. Tekstura so'ralganda, kesh avval uning xaritada mavjudligini tekshiradi. Agar mavjud bo'lsa, u deref() yordamida teksturani olishga harakat qiladi. Agar tekstura hali xotirada bo'lsa, u keshdan qaytariladi. Agar tekstura axlat yig'uvchi tomonidan o'chirilgan bo'lsa, kesh yozuvi o'chiriladi va tekstura manbadan yuklanadi. FinalizationRegistry tekstura axlat yig'uvchi tomonidan o'chirilganda uni yo'q qilish, ya'ni bog'liq resurslarni (masalan, GPU xotirasini) bo'shatish uchun ishlatiladi.

Eng yaxshi amaliyotlar va e'tiborga olinadigan jihatlar

• Kamdan-kam foydalaning: WeakRef va FinalizationRegistry dan oqilona foydalanish kerak. Ularni haddan tashqari ko'p ishlatish kodingizni murakkablashtirishi va disk raskadrovka qilishni qiyinlashtirishi mumkin.
• Unumdorlikka ta'sirini hisobga oling: WeakRef va FinalizationRegistry xotira samaradorligini oshirishi mumkin bo'lsa-da, ular unumdorlikka qo'shimcha yuklama ham keltirishi mumkin. Ularni ishlatishdan oldin va keyin kodingizning unumdorligini o'lchashga ishonch hosil qiling.
• Axlat yig'ish siklidan xabardor bo'ling: Axlat yig'ish vaqti oldindan aytib bo'lmaydi. Siz axlat yig'ish ma'lum bir vaqtda sodir bo'lishiga tayanmasligingiz kerak. FinalizationRegistry bilan ro'yxatdan o'tgan qayta chaqiruvlar sezilarli kechikishdan keyin bajarilishi mumkin.
• Xatolarni chiroyli tarzda hal qiling: WeakRef ning deref() metodi, agar obyekt axlat yig'uvchi tomonidan o'chirilgan bo'lsa, undefined qaytarishi mumkin. Kodingizda bu holatni to'g'ri hal qilishingiz kerak.
• Siklik bog'liqliklardan saqlaning: WeakRef va FinalizationRegistry ni o'z ichiga olgan siklik bog'liqliklar kutilmagan xatti-harakatlarga olib kelishi mumkin. Ularni murakkab obyekt grafiklarida ishlatganda ehtiyot bo'ling.
• Resurslarni boshqarish: Iloji bo'lsa, resurslarni aniq bo'shating. Resurslarni tozalash uchun faqat axlat yig'ish va finalizatsiya registrlariga tayanmang. Qo'lda resurslarni boshqarish mexanizmlarini ta'minlang (yuqoridagi Resurs misolidagi `release()` metodi kabi).
• Sinov (Testing): `WeakRef` va `FinalizationRegistry` dan foydalanadigan kodni sinovdan o'tkazish, axlat yig'ishning oldindan aytib bo'lmaydigan tabiati tufayli qiyin bo'lishi mumkin. Sinov muhitlarida axlat yig'ishni majburiy chaqirish (agar qo'llab-quvvatlansa) yoki axlat yig'ish xatti-harakatini simulyatsiya qilish uchun soxta obyektlardan foydalanish kabi texnikalarni ko'rib chiqing.

WeakRef ga alternativlar

WeakRef dan foydalanishdan oldin, xotirani boshqarishning muqobil yondashuvlarini ko'rib chiqish muhim:

• Obyektlar hovuzlari (Object Pools): Obyektlar hovuzlari yangilarini yaratish o'rniga obyektlarni qayta ishlatish uchun ishlatilishi mumkin, bu esa axlat yig'ilishi kerak bo'lgan obyektlar sonini kamaytiradi.
• Memoizatsiya: Memoizatsiya — bu qimmat funksiya chaqiruvlari natijalarini keshlash texnikasi. Bu yangi obyektlar yaratish zaruratini kamaytirishi mumkin.
• Ma'lumotlar tuzilmalari: Xotiradan foydalanishni minimallashtiradigan ma'lumotlar tuzilmalarini diqqat bilan tanlang. Masalan, oddiy massivlar o'rniga tiplangan massivlardan foydalanish raqamli ma'lumotlar bilan ishlaganda xotira sarfini kamaytirishi mumkin.
• Qo'lda xotirani boshqarish (iloji bo'lsa, saqlaning): Ba'zi past darajali tillarda dasturchilar xotirani ajratish va bo'shatish ustidan to'g'ridan-to'g'ri nazoratga ega. Biroq, qo'lda xotirani boshqarish xatolarga moyil va xotira sizib chiqishi va boshqa muammolarga olib kelishi mumkin. Bu odatda JavaScript'da tavsiya etilmaydi.

Xulosa

WeakRef va FinalizationRegistry xotirani tejaydigan JavaScript ilovalarini yaratish uchun kuchli vositalarni taqdim etadi. Ularning qanday ishlashini va qachon ishlatilishini tushunib, siz ilovalaringizning unumdorligi va barqarorligini optimallashtirishingiz mumkin. Biroq, ulardan oqilona foydalanish va WeakRef ga murojaat qilishdan oldin xotirani boshqarishning muqobil yondashuvlarini ko'rib chiqish muhimdir. JavaScript rivojlanishda davom etar ekan, bu xususiyatlar murakkab va resurs talab qiladigan ilovalarni yaratish uchun yanada muhimroq bo'lib qolishi mumkin.