Brauzerin əsas axını bahalı resursdur: onu qənaətlə xərcləmək

Frontend optimizasiyası adətən şəbəkə sorğuları, bundle ölçüsü və keşləmə ətrafında müzakirə olunur. Əsas axın (main thread) az xatırlanır, çünki adi ekranlarda problemə çevrilmir. Lakin interaktivliyi yüksək ekranlarda kodunuzu icra edən axın bloklananda şəbəkədə qənaət etdiyiniz heç nə kömək etmir. kciter.so bloqundakı "The Browser's Main Thread Is Expensive" yazısı məhz bu resursun qənaətlə xərclənməsindən bəhs edir.

Bir axın, iki iş

Əsas axın JavaScript icra edir — kodunuz, hadisə işləyiciləri, taymerlər, freymvorkun daxili məntiqi — və ekranı çəkir: stillərin hesablanması, layout, paint. Hamar görüntü üçün kadr ekranın yenilənmə tezliyində yaradılmalıdır: 60Hz-də təxminən 16,6 millisaniyə, brauzer xərci çıxıldıqda isə praktik büdcə təqribən 10 ms qalır. JavaScript təkaxınlı hadisə dövrü modelinə əsaslanır: bir tapşırıq icra olunarkən başqa heç nə baş verə bilməz. 200 millisaniyə çəkən funksiya bu müddətdə yenidənçəkməni, animasiyanı və girişi dondurur. 50 ms-dən uzun tapşırıqlar uzun tapşırıq sayılır; INP və TBT kimi metriklər əslində əsas axının nə qədər bloklandığını ölçür. Səbəb çox vaxt yavaş kod deyil — kodun axını tutması kifayətdir.

Qənaətli xərcləmənin dörd yolu

Yazı texnikaları dörd qrupa bölür: parçalama, qruplaşdırma, prioritetləşdirmə və təxirə salma. Parçalama uzun işi hissələrə bölür və aralarda axını sərbəst buraxır — məsələn, hər 20 söhbət mesajından sonra və ya kadr başına 5 ms büdcə ilə. Sərbəst buraxma işi sürətləndirmir; brauzerin girişi emal edib ekranı yeniləməsi üçün boşluqlar yaradır.

Qruplaşdırma çox tez-tez işə düşən tapşırıqları azaldır: sürüşdürmə və giriş hadisələri üçün debounce və throttle, canlı panellər üçün kadr başına bir çəkmə. Prioritetləşdirmə sıranı müəyyən edir: MessageChannel üzərində qurulmuş növbə istifadəçinin indicə kliklədiyi foto üçün işi fon önizləmələrindən önə keçirir. Təxirə salma isə işin məhz indi lazım olub-olmadığını soruşur: başlanğıc yükləmədə kodun bölünməsi, yalnız ekrana yaxın paylaşımların qurulması üçün IntersectionObserver, ekrandan kənar animasiyaların dayandırılması.

Əsas axından kənarda

Bəzi işləri tamamilə ötürmək olar. transform və opacity animasiyası kompozitor axınında qalır və JavaScript məşğul olsa da hamar qalır; top və ya width animasiyası isə hər kadrda layout hesablanması tələb edir. FLIP texnikası real layout dəyişikliyini transform əsaslı animasiyaya çevirir. web worker ağır hesablamaları — məsələn, böyük məlumatın analizini və ya şəkil emalını — götürə bilər, lakin DOM-a çıxışı yoxdur və məlumatı kopyalamaqla paylaşır; bufer ötürülərsə, sahiblik demək olar sıfır xərclə keçir.

İşi ümumiyyətlə görməmək

Ən böyük qazanc çox vaxt işin aradan qaldırılmasından gəlir: daxil olan axın emal gücünü üstələyəndə köhnə qeydləri atmaq, yığılmış yeniləmələri son dəyərdə birləşdirmək, təkrar hesablamaları memoizasiya etmək. Real vaxt tətbiqləri — striminq platformaları, redaktorlar, xəritələr, oyunlar — əsas axın yüklənən kimi yavaşlayır və hər istifadəçidə ən yeni avadanlıq yoxdur. Tapşırığı sürətləndirməzdən əvvəl soruşmaq lazımdır: bu iş ümumiyyətlə görülməlidirmi — indi, burada?