Tarayıcının ana iş parçacığı pahalı bir kaynaktır

Ön yüz optimizasyonu denince akla ağ istekleri, paket boyutu ve önbellek gelir. Ana iş parçacığı ise nadiren konuşulur, çünkü sıradan ekranlarda sorun hâline gelmez. Yoğun etkileşimli ekranlarda ise kodu çalıştıran iş parçacığı tıkandığında ağdan ya da paketten yapılan hiçbir tasarruf işe yaramaz. kciter.so blogundaki "The Browser's Main Thread Is Expensive" yazısı bu kaynağın nasıl tutumlu kullanılacağını anlatıyor.

Tek iş parçacığı, iki görev

Ana iş parçacığı JavaScript çalıştırır — kodunuz, olay işleyicileri, zamanlayıcılar, çatı iç mantığı — ve ekranı çizer: stil hesaplama, yerleşim, boyama. Akıcı bir ekran için kare, ekranın yenileme hızında üretilmelidir: 60Hz'de yaklaşık 16,6 milisaniye; tarayıcı maliyeti çıkarıldığında pratik bütçe yaklaşık 10 ms kalır. JavaScript tek iş parçacıklı olay döngüsü modeliyle çalışır: bir görev sürerken başka hiçbir şey olamaz. 200 milisaniye süren bir fonksiyon, o süre boyunca boyamayı, animasyonu ve girdiyi dondurur. 50 ms'yi aşan görevler "uzun görev" sayılır; INP ve TBT gibi metrikler aslında ana iş parçacığının ne kadar tıkandığını ölçer. Sorun genelde yavaş kod değil, kodun iş parçacığını tutmasıdır.

Tutumlu harcamanın dört yolu

Yazı teknikleri dört başlıkta topluyor: bölme, gruplama, önceliklendirme ve erteleme. Bölme, uzun işi parçalara ayırıp aralarda iş parçacığını serbest bırakır — örneğin her 20 sohbet mesajından sonra ya da kare başına 5 ms bütçeyle. Serbest bırakma işi hızlandırmaz; tarayıcının girdiyi işleyip ekranı yenilemesi için boşluk açar.

Gruplama çok sık tetiklenen görevleri azaltır: kaydırma ve girdi olayları için debounce ve throttle, canlı panolar için kare başına tek çizim. Önceliklendirme sırayı belirler: MessageChannel tabanlı bir kuyruk, kullanıcının yeni tıkladığı fotoğrafın işini arka plandaki önizleme üretiminin önüne geçirir. Erteleme ise işin şimdi gerekli olup olmadığını sorar: başlangıç yüklemesinde kod bölme, yalnızca ekrana yakın gönderileri kurmak için IntersectionObserver, ekran dışı animasyonları durdurmak.

Ana iş parçacığının dışı

Bazı işler tümüyle devredilebilir. transform ve opacity animasyonu bileştirici (compositor) iş parçacığında kalır ve JavaScript meşgulken bile akıcıdır; top veya width animasyonu ise her karede yerleşim hesabı doğurur. FLIP tekniği, gerçek bir yerleşim değişimini transform tabanlı animasyona çevirir. Bir web worker ayrıştırma ya da görüntü işleme gibi ağır hesapları üstlenebilir; ancak DOM'a erişemez ve veriyi kopyalayarak paylaşır — buffer devredilirse sahiplik neredeyse sıfır maliyetle el değiştirir.

İşi hiç yapmamak

En büyük kazanç çoğu zaman işi ortadan kaldırmaktan gelir: gelen veri işleme hızını aştığında eski kayıtları düşürmek, birikmiş güncellemeleri son değerde birleştirmek, yinelenen hesapları önbelleğe almak. Gerçek zamanlı uygulamalar — yayın platformları, editörler, haritalar, oyunlar — ana iş parçacığı yüklenir yüklenmez yavaşlar ve her kullanıcıda en yeni donanım yoktur. Bir görevi hızlandırmadan önce şunu sormak gerekir: bu iş gerçekten yapılmalı mı — şimdi, burada?