Uzun Görev (Long Task) Nedir?
Kısa tanım
Uzun görev (long task), tarayıcının ana iş parçacığını (main thread) 50 milisaniye veya daha uzun süre kesintisiz meşgul eden işlemdir; çoğunlukla büyük bir JavaScript çalıştırması, ağır bir stil hesaplaması ya da düzen (layout) işidir. Ana iş parçacığı aynı anda tek iş yapabildiği için uzun görev sürerken tıklama ve klavye girdilerine cevap verilemez. Uzun görevler INP'yi ve laboratuvar metriği TBT'yi doğrudan kötüleştirir.
Diğer adları: Long Task, main thread, ana iş parçacığı, ana thread, Long Tasks API
Ana iş parçacığı tek şeritli bir yoldur
Tarayıcıda sayfanın JavaScript'i, stil hesaplamaları, düzen (layout) ve boyama hazırlığı ile kullanıcı girdilerinin işlenmesi büyük ölçüde aynı iş parçacığında, ana iş parçacığında (main thread) sırayla yapılır. Bir görev başladığında bitene kadar araya başka iş giremez. Kullanıcı tam o sırada bir butona dokunursa tarayıcı tepkiyi ancak görev bittikten sonra işleyebilir.
W3C'nin Long Tasks API spesifikasyonu 50 milisaniye ve üzerindeki görevleri uzun görev olarak tanımlar. Eşik keyfi değildir: girdiye 100 milisaniye içinde görünür bir tepki verilebilmesi için, girdinin beklemek zorunda kalacağı işin 50 milisaniyeyi geçmemesi hedeflenir. 300 milisaniyelik bir JavaScript çalıştırması, bu süre boyunca sayfayı donmuş gibi gösterebilir.
Hangi metrikleri etkiler?
- INP: Bir etkileşimin süresi girdi gecikmesi, olay işleyicilerin çalışması ve bir sonraki karenin çizilmesi olarak üçe ayrılır. Etkileşim anında süren bir uzun görev girdi gecikmesini uzatır; uzun süren bir olay işleyicisi de kendisi bir uzun görevdir.
- TBT: Laboratuvar ölçümünde, FCP ile etkileşime hazır olma (TTI) arasındaki her uzun görevin 50 milisaniyeyi aşan kısmı toplanır. 250 ms'lik bir görev TBT'ye 200 ms ekler.
Uzun görevlerin tipik kaynakları; büyük JavaScript paketlerinin ayrıştırılıp çalıştırılması, framework'lerin sayfayı etkileşimli hale getirdiği hydration aşaması, üçüncü taraf etiketler (reklam, sohbet, analitik) ve büyük bir DOM'u tek seferde değiştiren işlemlerdir.
Uzun görevleri bulmak
Chrome DevTools'un Performance panelinde kayıt alındığında, 50 milisaniyeyi aşan görevler gri “Task” çubuklarının köşesinde kırmızı bir işaretle gösterilir. Bottom-Up görünümü, sürenin hangi betik ve fonksiyonda harcandığını ortaya çıkarır. Gerçek kullanıcılardan veri toplamak için tarayıcı API'leri kullanılabilir:
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log("Uzun görev:", Math.round(entry.duration), "ms");
}
}).observe({ type: "longtask", buffered: true });Long Tasks API yalnızca sürenin ve hangi çerçevede yaşandığının kaba bilgisini verir. Chrome 123 ile gelen Long Animation Frames (LoAF) API ise aynı 50 ms eşiğiyle, birden çok görevden oluşan gecikmiş kareleri ve sorumlu betiklerin kaynak adresini raporlar. Bu ayrıntı, INP sorunlarını gerçek kullanıcı izleme verisiyle teşhis ederken özellikle değerlidir.
Görevleri bölmek
Çözüm, işi yapmamak değil, araya tarayıcının nefes alabileceği boşluklar koymaktır. Uzun bir döngü parçalara bölünür ve parçalar arasında kontrol tarayıcıya geri verilir (yield). Destekleyen tarayıcılarda scheduler.yield(), desteklemeyenlerde setTimeout kullanılabilir:
function anaThreadeBirak() {
if (globalThis.scheduler?.yield) return scheduler.yield();
return new Promise((resolve) => setTimeout(resolve, 0));
}Diğer yöntemler: kullanılmayan kodu code splitting ile ilk yüklemeden çıkarmak, üçüncü taraf betikleri gerçekten gerektiğinde yüklemek, ağır hesaplamaları Web Worker'a taşımak ve kullanıcıya görünen güncellemeyi önce yapıp analitik gibi işleri sonraya bırakmak.