Agar siz front-end dasturchisi bo'lsangiz, shubhasiz, siz Chrome DevTools bilan tanishsiz. Bu sizning veb-ilovalaringizni disk raskadrovka va optimallashtirish imkonini beruvchi kuchli vositadir. Sizning e'tiboringizni jalb qilgan xususiyatlardan biri bu olov grafigi. Ushbu maqolada biz olov grafiklari nima ekanligini, nima uchun ular front-end ishlab chiquvchilari uchun muhimligini va Chrome DevTools-da olov grafigi xususiyatidan qanday foydalanishni muhokama qilamiz.

Olov grafigi nima?

Olov grafigi, shuningdek, olov diagrammasi sifatida ham tanilgan, dasturning stek izining grafik tasviridir. Bu dastur tomonidan turli funktsiyalar yoki usullarga sarflangan vaqtni tasavvur qilishning bir usuli. Olovli grafiklar, ayniqsa, dasturning ishlashini profillash uchun foydalidir. Ular qaysi funksiyalar yoki usullar ko'proq vaqt talab qilayotganini va optimallashtirish harakatlari qayerga yo'naltirilishi kerakligini aniqlashga yordam beradi.

Olovli grafiklar o'z nomini ko'tarilgan ma'lumotlar nuqtalari olovga o'xshab kichikroq bo'lgan joyda ma'lumotlarning ko'rsatilish usulidan oladi. Grafik yuqoriga ko'tarilgan gorizontal chiziqlardan iborat bo'lib, har bir chiziq vazifani ifodalaydi. Pastki qism asosiy vazifa bo'lib, yuqoridagi har bir satr pastga tushadi. Agar ota-ona vazifasi tepada bo'lsa va bolalar pastga tushsa, u muz aylanishi jadvali deb ataladi. Ikkalasi funktsional jihatdan bir xil, ammo biz ushbu maqolada birinchisiga murojaat qilamiz.

Olovli grafikalar haqida ko'proq ma'lumot olish uchun siz Brendan Gregg yaratuvchisi yoki olov grafiklari tomonidan yozilgan "ushbu blog" ni ko'rishingiz mumkin.

Nega bu front-end ishlab chiqish uchun muhim?

Bu savolga javob berish uchun avvalo JavaScript Event Loop-ga qarashimiz kerak.

Voqealar sikli JavaScript uchun trafik boshqaruvchisiga o'xshaydi. Hodisa tugmani bosish yoki tarmoq so'rovi kabi sodir bo'lganda, u navbatga qo'shiladi. Voqealar sikli navbatdan bajariladigan qo'ng'iroqlar stekiga voqeani yuboradi; ammo, agar qo'ng'iroqlar to'plami band bo'lsa, voqea oldingi voqealar tugaguniga qadar navbatda qoladi.

Bu erda biz ba'zi muammolarga duch kelishimiz mumkin. Voqealar davri qo'ng'iroqlar to'plamiga hodisalarni yuborishni kutishi kerak bo'lganda, u keyingi voqealarni bajarishda va foydalanuvchi kutayotgan har qanday DOM (Hujjat ob'ekt modeli) o'zgarishlarida kechikishlarga olib keladi. Yakuniy foydalanuvchi qo'ng'iroqlar to'plamida to'g'ridan-to'g'ri katta kechikishlarni his qiladi, natijada foydalanuvchi tajribasi yomon bo'ladi.

Bu erda olov grafigi foydali bo'ladi. Olovli grafik ishlash profili davomida har bir millisekundda JavaScript stekining holatini ko'rsatadi. Bu yozib olishning istalgan nuqtasida qaysi funksiya bajarilganligini, qancha vaqt ishlaganini va qayerdan chaqirilganligini aniq bilish imkonini beradi. Bu unumdorlikdagi qiyinchiliklarni hal qilishda foydalidir, chunki grafik sizga mas'ul funksiya(lar)ni topishga imkon beradi, shunda ularni qayta ishlash mumkin va o'z navbatida oxirgi foydalanuvchi tajribasini tezroq va silliqroq taqdim etadigan yaxshi veb-saytlarni yaratishga imkon beradi. .

Qanday foydalanish kerak

Namoyish uchun biz mening kompyuterimda mahalliy ravishda ishlaydigan asosiy dasturni ko'rib chiqamiz, u quyidagi sekin funktsiyani o'z ichiga oladi, bu bizning muammomiz bo'lib xizmat qiladi.

Chrome DevTools-da olovli grafik funksiyasidan foydalanish uchun avval brauzerda ilovangizga oʻtishingiz va F12 tugmasini bosib yoki sahifani oʻng tugmasini bosib, “Tekshirish”ni tanlash orqali DevTools panelini ochishingiz kerak. DevTools panelini ochganingizdan so'ng, Ishlash yorlig'ini bosing.

Ishlash ko'rinishida ilovangizni profillashni boshlash uchun Yozish tugmasini bosing.

Ishlashda hiqichoqqa olib keladigan vazifa yoki vazifalarni bajaring, mening holimda Sekin funktsiyani boshlash tugmasini bosing, so'ngra hodisa tugagandan so'ng profilni to'xtatish uchun To'xtatish tugmasini bosing.

Profillashdan so'ng, profil holatida bajarilgan har bir vazifaning ish vaqti ma'lumotlaridan olovli grafik yaratiladi. Uzoq muddatli vazifalar qizil rangga bo'yalgan, ularning bolalar vazifalari quyida joylashtirilgan. Uzoq muddatli vazifalar aniqlangandan so'ng, biz ekranning pastki qismida qo'shimcha ma'lumot olish uchun ustiga bosishimiz mumkin. Bu erda biz bu bir soniya davom etadigan uzoq ish ekanligi haqida ogohlantiramiz.

Agar biz kattalashtirsak, yuqoridan pastgacha bo'lgan voqealar zanjirini ko'rishimiz mumkin, bu bizni darboğazni keltirib chiqaradigan funktsiyaga olib boradi. Bu yerda hodisalar zanjiri quyidagicha: Voqea -› funksiya chaqiruvi -› anonim funksiya -› slowFunction-ni bosing. Quyida biz "slowFunction" hodisasi "(anonim)" topshirig'i ostida bir soniya ichida bir necha marta ishlayotganini ko'rishimiz mumkin. slowFunction hodisalaridan birini bosish ish vaqti haqidagi ma'lumotni, shuningdek, funksiyaning fayl va satr raqamini xulosa oynasida ko'rsatadi, bu esa manba yorlig'idagi kod bilan bog'lanadi va bu JavaScript-ni ochadi. Bu yerdan biz eng ko'p vaqt talab qiladigan kod qatorini ko'rishimiz va refaktoring harakatlarimizni u erga qaratishimiz mumkin.

Murakkabroq ilovalarda, masalan, front-end ramkasidan foydalanishda, hodisalar ramka tomonidan yashirilishi mumkin, bu esa mazmunli ma'lumotni topishni qiyinlashtiradi. Angular ilovasidan yaratilgan quyidagi otash grafigida ko'rib chiqilayotgan hodisa kompilyator tomonidan "6224" deb nomlangan burchakli shablon mantig'ining bir qismidir. Buni e'tibordan chetda qoldirish oson, chunki ism taniqli yoki odamlarga mos kelmaydigan narsa emas.

To'siqni topishda qiynalayotganda, Voqealar jurnaliga olov grafigini boshqa nuqtai nazardan ko'rish va boshqarish usuli sifatida qarash foydali bo'lishi mumkin. Voqealar jurnali olov grafigi bilan bir xil ma'lumotlarni o'z ichiga oladi (va unga qo'shimcha sifatida ishlatilishi mumkin), lekin fayllar tizimi katalogi kabi tuzilgan, bu erda voqealar papkalar sifatida ro'yxatga olinadi. Voqealar jurnalida voqealar jildning chap tomonida umumiy vaqt ustuni bilan belgilanadi, bu erda uzoq voqealar vaqtlari to'q sariq rangda ta'kidlanadi. Olov grafigining ushbu ko'rinishidan foydalanib, uzoq davom etayotgan voqealarni topish va ichki joylashtirilgan papkalar bo'ylab harakatlanish orqali, umumiy vaqt ustunidan vazifa qaysi papkalarga joylashtirilganiga havola sifatida foydalanish orqali muammoni aniqlash mumkin. topilgan bo'lsa, fayl va satr raqami o'ng tomonda keltirilgan va xuddi olov grafigi hodisasi xulosasi ko'rinishidagi kabi manba kodiga bog'lanadi.

Xulosa

Xulosa qilib aytganda, Chrome DevTools-dagi otash grafigi veb-ilovalarini optimallashtirishga intilayotgan front-end dasturchilar uchun ajralmas vositadir. Uning bajarilish vaqtini tasavvur qilish, ishlashdagi qiyinchiliklarni aniqlash va disk raskadrovkada yordam berish qobiliyati uni ishlab chiquvchi asboblar qutisidagi muhim aktivga aylantiradi. Olovli grafikning kuchidan foydalanib, ishlab chiquvchilar ajoyib foydalanuvchi tajribasini taqdim etadigan tezroq, samaraliroq va yuqori samarali veb-ilovalarni yaratishi mumkin.

Slalom - bu odamlar va tashkilotlarga kattaroq orzu qilish, tezroq harakat qilish va hamma uchun yaxshiroq ertangi kunlar qurishga yordam beradigan global konsalting kompaniyasi. “Batafsil ma’lumot oling va bugun bog‘laning.”