JavaScript Performance API: Ishlash Vaqti Metrikalarini Yig'ishni O'zlashtirish

Bugungi tez sur'atlarda rivojlanayotgan raqamli dunyoda veb-saytlar va veb-ilovalarning ishlash samaradorligi juda muhim. Foydalanuvchilar tezkor javob va uzluksiz tajribani kutishadi. Sekin yuklanish vaqti yoki sust interaktivlik hafsalasizlikka va natijada foydalanuvchilarning ketishiga olib kelishi mumkin. Optimal samaradorlikni ta'minlash uchun dasturchilarga o'zlarining JavaScript kodlarining ishlash vaqtidagi xatti-harakatlarini o'lchash, tahlil qilish va yaxshilash uchun vositalar kerak. JavaScript Performance API ishlash vaqti metrikalarini to'plash uchun kuchli va standartlashtirilgan usulni taqdim etadi, bu esa dasturchilarga samaradorlikdagi to'siqlarni aniqlash va ilovalarini silliqroq foydalanuvchi tajribasi uchun optimallashtirish imkonini beradi.

JavaScript Performance API nima?

JavaScript Performance API bu zamonaviy veb-brauzerlarda mavjud bo'lgan interfeyslar va metodlar to'plami bo'lib, dasturchilarga turli xil samaradorlikka oid ma'lumotlarga kirish va ularni o'lchash imkonini beradi. U ishlash vaqtidagi xatti-harakatlarning turli jihatlari haqida ma'lumot beradi, jumladan:

• Navigatsiya Vaqtini O'lchash (Navigation Timing): Sahifani yuklashning turli bosqichlari uchun sarflangan vaqtni o'lchaydi, masalan, DNS qidiruvi, TCP ulanishi, so'rov va javob vaqtlari.
• Resurs Vaqtini O'lchash (Resource Timing): Sahifa tomonidan yuklangan har bir resurs uchun, masalan, rasmlar, skriptlar va uslublar jadvallari uchun batafsil vaqt ma'lumotlarini taqdim etadi.
• Foydalanuvchi Vaqtini O'lchash (User Timing): Dasturchilarga o'z ilovalarining mantig'iga xos bo'lgan maxsus samaradorlik metrikalarini aniqlash va o'lchash imkonini beradi.
• Uzoq Vazifalar (Long Tasks): Asosiy oqimni uzoq vaqt davomida bloklaydigan va UI (foydalanuvchi interfeysi) qotishiga olib kelishi mumkin bo'lgan vazifalarni aniqlaydi.
• Xotira O'lchovi (Memory Measurement): (Ba'zi brauzerlarda mavjud) Sahifaning xotiradan foydalanishi haqida ma'lumot beradi.
• Element Vaqtini O'lchash (Element Timing): Muayyan HTML elementlari foydalanuvchiga ko'rinadigan bo'lgan vaqt bo'yicha metrikalarni taqdim etadi.
• Hodisa Vaqtini O'lchash (Event Timing): Kliklar, klaviatura bosishlari va boshqa foydalanuvchi o'zaro ta'sirlari kabi hodisalar davomiyligini o'lchaydi.

Ushbu imkoniyatlardan foydalangan holda, dasturchilar o'zlarining JavaScript kodlari real sharoitlarda qanday ishlashini chuqur tushunishlari va optimallashtirish uchun joylarni aniqlashlari mumkin.

Performance API'ning Asosiy Komponentlari

1. performance Ob'ekti

performance ob'ekti Performance API'ga kirish uchun asosiy nuqtadir. U window ob'ektining xususiyati bo'lib, samaradorlik ma'lumotlarini o'lchash va tahlil qilish uchun turli metodlar va xususiyatlarga kirishni ta'minlaydi. Eng ko'p ishlatiladigan xususiyatlar performance.timing va performance.now().

2. performance.now()

performance.now() hujjatning navigatsiya boshlanishidan o'tgan vaqtni ifodalovchi yuqori aniqlikdagi vaqt belgisini (millisekundlarda) qaytaradi. Bu kodning bajarilish davomiyligini o'lchash uchun asosdir. Date.now() dan farqli o'laroq, performance.now() monotonikdir, ya'ni unga tizim soati sozlamalari ta'sir qilmaydi.

Misol: Funksiyaning Bajarilish Vaqtini O'lchash

            const startTime = performance.now();
// Code to be measured
for (let i = 0; i < 1000000; i++) {
  // Perform some operation
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Execution time: ${executionTime} milliseconds`);

            

              
                Copy
              
            
          

3. Samaradorlik Xronologiyasi (Performance Timeline)

Samaradorlik Xronologiyasi bu sahifaning ishlash muddati davomida yuzaga keladigan samaradorlik bilan bog'liq hodisalar qaydidir. U navigatsiya vaqtini, resurs vaqtini, foydalanuvchi vaqtini va boshqa yozuvlarni o'z ichiga oladi. Samaradorlik Xronologiyasiga performance.getEntries(), performance.getEntriesByType() va performance.getEntriesByName() kabi metodlar orqali kirish mumkin.

4. PerformanceEntry Interfeysi

Samaradorlik Xronologiyasidagi har bir yozuv PerformanceEntry ob'ekti bilan ifodalanadi. Ushbu interfeys samaradorlik hodisasini tavsiflovchi xususiyatlarni taqdim etadi, masalan, uning nomi, boshlanish vaqti, davomiyligi va yozuv turi. Turli xil samaradorlik yozuvlari o'zlarining hodisa turiga xos qo'shimcha xususiyatlarga ega.

Ishlash Vaqti Metrikalarini Yig'ish va Tahlil Qilish

JavaScript Performance API ishlash vaqti metrikalarini yig'ish va tahlil qilish uchun turli xil usullarni taklif etadi. Mana ba'zi keng tarqalgan foydalanish holatlari:

1. Sahifaning Yuklanish Vaqtini O'lchash

performance.timing ob'ekti sahifani yuklashning turli bosqichlari haqida batafsil ma'lumot beradi. Siz ushbu ma'lumotlardan to'siqlarni aniqlash va yuklash jarayonini optimallashtirish uchun foydalanishingiz mumkin.

Misol: DOMContentLoaded Hodisasi Vaqtini Hisoblash

            window.addEventListener('load', () => {
  const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
  console.log(`DOMContentLoaded event time: ${loadTime} milliseconds`);
});

            

              
                Copy
              
            
          

Natijalarni Izohlash: Yuqori domContentLoadedEventEnd qiymati brauzerning JavaScript kodini tahlil qilish va bajarish, DOMni render qilish yoki resurslar yuklanishini kutish uchun ko'p vaqt sarflayotganini ko'rsatishi mumkin. Alohida resurslarning yuklanish vaqtini tahlil qilish (quyida ko'rsatilgan) kechikishlarga sabab bo'layotgan aniq resurslarni aniqlashga yordam beradi.

Optimallashtirish Strategiyalari: Mumkin bo'lgan yechimlar orasida muhim bo'lmagan JavaScript bajarilishini kechiktirish, CSS yetkazib berishni optimallashtirish va DOM elementlari sonini minimallashtirish mavjud.

2. Resurslarning Yuklanish Vaqtini O'lchash

Resurs Vaqtini O'lchash API'si sahifa tomonidan yuklangan har bir resurs uchun batafsil vaqt ma'lumotlarini taqdim etadi. Bu sizga sekin yuklanayotgan resurslarni aniqlash va ularni yetkazib berishni optimallashtirish imkonini beradi.

Misol: Resurs Vaqti Ma'lumotlarini Olish

            const resourceEntries = performance.getEntriesByType('resource');

resourceEntries.forEach(entry => {
  console.log(`Resource: ${entry.name}`);
  console.log(`  Duration: ${entry.duration} milliseconds`);
  console.log(`  Fetch Start: ${entry.fetchStart}`);
  console.log(`  Response End: ${entry.responseEnd}`);
});

            

              
                Copy
              
            
          

Natijalarni Izohlash: Har bir resurs yozuvining duration xususiyatini tekshirish sekin yuklanayotgan resurslarni aniqlashga yordam beradi. Yuqori duration tarmoq kechikishi, katta fayl hajmlari yoki samarasiz server tomonidagi qayta ishlashni ko'rsatishi mumkin.

Optimallashtirish Strategiyalari: Mumkin bo'lgan yechimlar orasida rasmlarni siqish, JavaScript va CSS fayllarini minifikatsiya qilish, Kontent Yetkazib Berish Tarmog'idan (CDN) foydalanish va server tomonidagi keshlashtirishni optimallashtirish mavjud.

Global Misol: Cheklangan tarmoq o'tkazuvchanligiga ega bo'lgan hududlardagi (masalan, Janubi-Sharqiy Osiyo, Afrikaning ba'zi qismlari) foydalanuvchilarga yuqori aniqlikdagi rasmlarni taqdim etuvchi veb-saytda ushbu foydalanuvchilar uchun yuklanish vaqti sezilarli darajada sekinlashishi mumkin. Foydalanuvchining ulanish tezligi va ekran o'lchamiga moslashadigan responsiv rasmlarni joriy etish samaradorlikni sezilarli darajada yaxshilashi mumkin.

3. Foydalanuvchi O'zaro Ta'sirlarini O'lchash

Foydalanuvchi Vaqtini O'lchash API'si sizga ilovangiz mantig'iga xos bo'lgan maxsus samaradorlik metrikalarini aniqlash va o'lchash imkonini beradi. Bu muhim foydalanuvchi o'zaro ta'sirlari, masalan, shakllarni yuborish, qidiruv so'rovlari va navigatsiya o'tishlari samaradorligini kuzatish uchun foydalidir.

Misol: Shaklni Yuborish uchun Sarflangan Vaqtni O'lchash

            const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simulate form submission delay
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Form submission duration: ${measure.duration} milliseconds`);
  }, 1000); //Simulate network request taking 1 second

  event.preventDefault();
});

            

              
                Copy
              
            
          

Natijalarni Izohlash: Yuqori formSubmitDuration qiymati sekin server tomonidagi qayta ishlash, tarmoq kechikishi yoki samarasiz mijoz tomonidagi tekshiruvni ko'rsatishi mumkin.

Optimallashtirish Strategiyalari: Mumkin bo'lgan yechimlar orasida server tomonidagi kodni optimallashtirish, tarmoq so'rovlarini kamaytirish va mijoz tomonidagi tekshiruvni yaxshilash mavjud.

4. Uzoq Vazifalarni Aniqlash

Uzoq vazifalar - bu asosiy oqimni uzoq vaqt davomida (odatda 50 millisekunddan uzoqroq) bloklaydigan, UI qotishiga va yomon foydalanuvchi tajribasiga olib kelishi mumkin bo'lgan vazifalardir. Uzoq Vazifalar API'si ushbu vazifalarni aniqlash va ularni oldini olish uchun kodingizni optimallashtirish imkonini beradi.

Misol: Uzoq Vazifalarni Aniqlash

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`Long task: ${entry.name}`);
    console.log(`  Duration: ${entry.duration} milliseconds`);
  });
});

observer.observe({ entryTypes: ['longtask'] });

// Simulate a long task
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Long task complete: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

Natijalarni Izohlash: Uzoq vazifa davomiyligi brauzerning UI'ni silliq yangilashiga to'sqinlik qilayotgan kodni ko'rsatadi.

Optimallashtirish Strategiyalari: Kodni bo'lish (code splitting), debouncing, throttling va vazifalarni web workerlarga yuklash uzoq vazifa davomiyligini kamaytirish strategiyalaridir.

5. Elementning Ko'rinishini O'lchash

Element Vaqtini O'lchash API'si sizga ma'lum HTML elementlarining foydalanuvchiga qachon ko'rinadigan bo'lishini o'lchash imkonini beradi. Bu, ayniqsa, asosiy rasmlar (hero images) yoki muhim kontent bo'limlari kabi kritik elementlarning yuklanish va render qilish samaradorligini kuzatish uchun foydalidir.

Misol: Element Ko'rinishi Vaqtini O'lchash

            <img src="hero-image.jpg" elementtiming="hero-image" id="heroImage">

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'hero-image') {
      console.log(`Hero image render start: ${entry.renderStart} milliseconds`);
    }
  });
});

observer.observe({ type: 'element', buffered: true });

            

              
                Copy
              
            
          

Natijalarni Izohlash: Kech renderStart qiymati elementning ko'rinishi uchun ko'p vaqt talab etilayotganini ko'rsatadi, bu ehtimol sekin yuklanish yoki render qilish jarayonlari tufayli bo'lishi mumkin.

Optimallashtirish Strategiyalari: Rasmlarni siqishni optimallashtiring, "dangasa yuklash" (lazy loading) dan foydalaning va muhim resurslarning yuklanishiga ustuvorlik bering.

6. Hodisa Kechikishini O'lchash

Hodisa Vaqtini O'lchash API'si hodisalarni tinglovchilarining (event listeners) bajarilishi uchun qancha vaqt ketishini o'lchaydi. Bu foydalanuvchi o'zaro ta'sirini sekinlashtirishi mumkin bo'lgan hodisalarni qayta ishlovchilarni aniqlash uchun qimmatlidir.

Misol: Klik Hodisasi Kechikishini O'lchash

            <button id="myButton">Click Me</button>

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simulate some processing
  for (let i = 0; i < 1000000; i++) {
    // Perform some operation
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

  const measure = performance.getEntriesByName('clickDuration')[0];
  console.log(`Click event duration: ${measure.duration} milliseconds`);
});

            

              
                Copy
              
            
          

Natijalarni Izohlash: Uzoq clickDuration hodisani qayta ishlovchining bajarilishi uchun juda ko'p vaqt ketayotganini ko'rsatadi, bu esa UI javobida kechikishga olib kelishi mumkin.

Optimallashtirish Strategiyalari: Hodisalarni qayta ishlovchi kodni optimallashtiring, hodisalarni tinglovchilarni debouncing yoki throttling qiling va og'ir ishlov berishni web workerlarga yuklang.

Performance API'dan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

• Aniq vaqt o'lchovlari uchun performance.now() dan foydalaning. U yuqori aniqlikni ta'minlaydi va monotonikdir, bu uni kodning bajarilish vaqtini o'lchash uchun ideal qiladi.
• Samaradorlik hodisalarini tahlil qilish uchun Samaradorlik Xronologiyasidan foydalaning. Samaradorlik Xronologiyasi sahifaning ishlash muddati davomida yuzaga keladigan samaradorlik bilan bog'liq hodisalarning keng qamrovli qaydini taqdim etadi.
• Maxsus samaradorlik metrikalarini aniqlash uchun Foydalanuvchi Vaqtini O'lchash API'sidan foydalaning. Bu sizga muhim foydalanuvchi o'zaro ta'sirlari va ilovaga xos mantiqning samaradorligini kuzatish imkonini beradi.
• Samaradorlikni real sharoitlarda kuzatib boring. Haqiqiy foydalanuvchilardan samaradorlik ma'lumotlarini to'plash uchun Google Analytics, New Relic yoki Sentry kabi vositalardan foydalaning. Bu sizga ilovangiz samaradorligining aniqroq tasvirini beradi.
• Samaradorlik byudjetlarini belgilang va vaqt o'tishi bilan taraqqiyotni kuzatib boring. Ilovangiz uchun samaradorlik maqsadlarini belgilang va vaqt o'tishi bilan taraqqiyotingizni kuzatib boring. Bu sizga samaradorlikni optimallashtirishga e'tibor qaratishga va ilovangiz foydalanuvchilarning kutganlarini qondirishiga yordam beradi.
• Performance API'ni boshqa nosozliklarni tuzatish vositalari bilan birlashtiring. Brauzer dasturchi vositalari JavaScript kodini profilaktika qilish va nosozliklarni tuzatish uchun kuchli imkoniyatlarni taklif etadi. Ushbu vositalarni Performance API bilan birlashtirish samaradorlikdagi to'siqlar haqida yanada chuqurroq ma'lumot berishi mumkin.

Samaradorlikni Kuzatish uchun Vositalar va Kutubxonalar

Performance API xom ma'lumotlarni taqdim etsa-da, bir nechta vositalar va kutubxonalar sizga bu ma'lumotlarni samaraliroq tahlil qilish va vizualizatsiya qilishga yordam beradi:

• Google Lighthouse: Veb-sayt samaradorligi, qulayligi va SEO'sini tekshirish uchun avtomatlashtirilgan vosita. U metrikalarni yig'ish uchun Performance API'dan foydalanadi va yaxshilash uchun amaliy tavsiyalar beradi.
• WebPageTest: Veb-saytingiz samaradorligini turli joylardan va brauzerlardan sinab ko'rish imkonini beruvchi bepul veb-sayt tezligini sinash vositasi.
• New Relic Browser: Veb-sayt samaradorligi, jumladan, sahifa yuklanish vaqti, JavaScript xatolari va foydalanuvchi tajribasi metrikalari haqida real vaqtda ma'lumot beruvchi keng qamrovli samaradorlik monitoringi vositasi.
• Sentry: JavaScript kodingizdagi muammolarni aniqlash va hal qilishga yordam beradigan xatolarni kuzatish va samaradorlikni monitoring qilish platformasi.
• Perfume.js: Samaradorlik metrikalarini yig'ish va hisobot berish uchun oddiy API taqdim etadigan kichik, ochiq manbali kutubxona.

Xulosa

JavaScript Performance API yuqori samarali veb-ilovalarni yaratmoqchi bo'lgan har qanday veb-dasturchi uchun ajralmas vositadir. Performance API imkoniyatlaridan foydalanib, siz ilovangizning ishlash vaqtidagi xatti-harakatlarini chuqur tushunishingiz, samaradorlikdagi to'siqlarni aniqlashingiz va kodingizni silliqroq foydalanuvchi tajribasi uchun optimallashtirishingiz mumkin. Ushbu samaradorlikni monitoring qilish usullarini joriy etish va kodingizni doimiy ravishda takomillashtirish butun dunyo bo'ylab foydalanuvchilarni xursand qiladigan tezroq, javob beruvchi veb-saytlar va veb-ilovalarga olib keladi. Veb-ilovangizning samaradorligini optimallashtirishda barcha uchun izchil foydalanuvchi tajribasini ta'minlash uchun turli xil tarmoq sharoitlari va qurilma imkoniyatlarini hisobga olishni unutmang.