Ana içeriğe geç
Web Geliştirme

Tarayıcı ana iş parçacığını verimli kullanma yöntemleri açıklandı

Öne çıkanlar

  • Tarayıcıda JavaScript çalıştırma ve ekran çizim adımları aynı ana iş parçacığı üzerinde sırayla işleniyor.
  • 60 Hz ekranlarda akıcılık için pratik geliştirici işlem bütçesi kare başına yaklaşık 10 milisaniyedir.
  • Uzun görevleri zaman veya adet bazında parçalara ayırmak kullanıcı etkileşimindeki donmaları engelliyor.

Web uygulamalarında kullanıcı etkileşimi ve veri akışı arttıkça tarayıcı performansını belirleyen temel unsur ana iş parçacığının (main thread) yönetimi haline geliyor. Ağ isteklerini azaltmak veya paket boyutunu küçültmek gibi klasik önbellek optimizasyonları yapılsa bile, ana iş parçacığı uzun süren görevlerle bloke edildiğinde ekranda takılmalar ve gecikmeler yaşanıyor. JavaScript kodunun çalıştırılması ile ekran çizim aşamalarının aynı hat üzerinde sırayla ilerlemesi bu kaynak darboğazını oluşturuyor.

Ekranın 60 Hz yenileme hızında akıcı kalabilmesi için her karenin yaklaşık 16,6 milisaniyede tamamlanması gerekiyor. Tarayıcının kendi dahili işlemleri düşüldüğünde geliştiricilere yaklaşık 10 milisaniyelik bir çalışma bütçesi kalıyor. 50 milisaniyenin üzerindeki görevler ana iş parçacığını kilitleyerek kullanıcı girdilerini ve ekran yenilemelerini engelliyor. Bu durum Interaction to Next Paint (INP) ve Total Blocking Time (TBT) gibi temel performans metriklerini doğrudan olumsuz etkiliyor.

Sorunun çözümü için işlerin parçalanması (splitting), gruplanması (batching), önceliklendirilmesi (prioritizing) ve ertelenmesi (deferring) gibi stratejiler öne çıkıyor. Yoğun veri akışlarında setTimeout veya requestAnimationFrame kullanılarak ana iş parçacığı düzenli aralıklarla serbest bırakılıyor. Görevlerin zaman bütçelerine göre bölünmesi, toplam işlem süresini kısaltmasa da arayüzün akıcı yanıt vermesini sağlıyor.

Kaynak

Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.