Uzun Görev, ana iş parçacığını uzun süre tekeline getirip kullanıcı arayüzünün "donmasına" neden olan JavaScript kodudur.
Bir sayfa sayfası yüklenirken Uzun Görevler ana ileti dizisini bağlayabilir ve hazır görünse bile sayfanın kullanıcı girişine yanıt vermemesine neden olabilir. Etkinlik işleyiciler ve tıklama işleyiciler gibi etkileşimli özellikler henüz kullanıcı arayüzü öğelerine eklenmediğinden tıklamalar ve dokunmalar genellikle çalışmaz. Bu nedenle, Uzun Görevler Etkileşime Hazır Olma Sürenizi önemli ölçüde artırabilir.
Chrome Geliştirici Araçları artık Uzun Görevleri görselleştirebilir. Bu sayede optimize edilmesi gereken görevleri daha kolay görebilirsiniz.
Neler Uzun Görev olarak kabul edilir?
CPU açısından ağır olan Uzun Görevler 50 ms'den uzun süren karmaşık çalışmalardan kaynaklanır. RAIL modeli, 100 ms içinde görünür bir yanıt sağlamak ve eylem ile tepki arasındaki bağlantıyı korumak için kullanıcı giriş etkinliklerini 50 ms süre içinde işlemenizi önerir.
Önemli nokta: RAIL modeli, kullanıcı girişine 100 ms içinde görsel yanıt verilmesini önerirken Sonraki Boyamayla Etkileşim (INP) metriğinin eşikleri, özellikle yavaş cihazlarda daha ulaşılabilir beklentiler oluşturmak için 200 ms'ye kadar izin verir.
Sayfamda etkileşimi geciktirebilecek Uzun Görevler var mı?
Şimdiye kadar, hangi görevlerin etkileşimi geciktirdiğini anlamak için Chrome DevTools'da 50 ms.den uzun komut dosyası "uzun sarı bloklar"ı manuel olarak aramanız veya Long Tasks API'yi kullanmanız gerekiyordu.
Performans denetimi iş akışınızı kolaylaştırmaya yardımcı olmak için DevTools artık Uzun Görevleri görselleştiriyor. Uzun Görevler olan görevlerde (gri gösterilen) kırmızı bayraklar görünür.
Yeni görselleştirme aracını kullanmak için:
- Web sayfası yüklemenin Performans panelinde bir iz kaydedin.
- Ana ileti dizisi görünümünde kırmızı bir bayrak olup olmadığına bakın. Görevlerin gri renkte işaretlendiğini ve Görev olarak etiketlendiğini görürsünüz.
- İşaretçinizi gri bir çubuğun üzerinde tutun. Görev süresini ve bunun Uzun Görev olarak kabul edilip edilmediğini belirten bir iletişim kutusu göreceksiniz.
Uzun Görevlerimin nedeni ne?
Uzun bir görevin nedenini öğrenmek için gri renkli Görev çubuğunu seçin. Alttaki çekmecede Aşağıdan Yukarıya ve Etkinliğe Göre Gruplama'yı seçin. Böylece bu kadar uzun süren göreve en çok (toplam olarak) katkıda bulunan etkinlikleri görebilirsiniz. Aşağıdaki örnekte, gecikmenin nedeni, maliyetli bir DOM sorguları kümesi gibi görünmektedir.
Uzun Görevleri optimize etmenin yaygın yolları nelerdir?
Büyük metinler genellikle Uzun Görevler'in ana nedenlerinden biridir. Bunları bölmeyi düşünebilirsiniz. Ayrıca, birincil içeriğin etkileşimli hale gelmesini geciktiren Uzun Görevler içerebilen üçüncü taraf komut dosyalarına da dikkat edin.
Tüm çalışmalarınızı 50 ms'den kısa süren parçalara bölüp bu parçaları doğru yerde ve zamanda çalıştırın. Bazıları için doğru yer, ana iş parçacığının dışındaki bir hizmet çalışanı olabilir. Uzun görevleri bölme konusunda yardım için bkz. Uzun Görevleri Optimize Etme ve Phil Walton'un Acil Duruma Kadar Boşta Kalma.
Sayfalarınızın duyarlı olmasını sağlayın. Uzun Görevleri en aza indirmek, sitenizi ziyaret eden kullanıcıların keyifli bir deneyim yaşamasını sağlamanın harika bir yoludur. Uzun Görevler hakkında daha fazla bilgi için Kullanıcı Merkezli Performans Metrikleri'ne bakın.