𝟩 Gizli JavaScript Darboğazı ve Bunlar Nasıl Düzeltilir
Yavaş web uygulamaları nadiren kötü algoritmalardan dolayı başarısız olur. Başarısızlıkları, kodunuzun tarayıcıyla nasıl iletişim kurduğuyla ilgilidir.
300 canlı uygulamayı profilledim. Performans sorunlarının %73'ü bu 7 kaynaktan kaynaklanıyor.
- Layout thrashing Bir özelliği okuyup, DOM'a yazıp, sonra tekrar okuduğunuzda bu durum gerçekleşir. Bu, tarayıcıyı düzeni (layout) tekrar tekrar yeniden hesaplamaya zorlar.
- Çözüm: Önce tüm okuma işlemlerini toplu halde yapın. Ardından tüm yazma işlemlerini
requestAnimationFramekullanarak toplu halde gerçekleştirin.
- Unbounded event listeners Bir olay dinleyicisi ekleyip onu kaldırmamak bellek sızıntılarına (memory leaks) yol açar. Bu, tek sayfalık uygulamalarda (SPA) büyük bir sorundur.
- Çözüm: Bileşenler unmount olduğunda dinleyicileri temizlemek için
AbortControllerkullanın.
- Döngüler içinde senkronize DOM okumaları
Bir döngü içinde
offsetWidthveyagetBoundingClientRectokumak, sürekli reflow tetikler.
- Çözüm: Döngüye başlamadan önce düzen değerlerini bir değişkende önbelleğe alın.
- requestAnimationFrame toplu işlem eksikliği Kaydırma (scroll) veya yeniden boyutlandırma (resize) olaylarında yapılan doğrudan DOM değişiklikleri çok sık tetiklenir. Bu durum takılmalara (jank) neden olur.
- Çözüm: Güncellemeleri boyama döngüsüyle (paint cycle) senkronize etmek için bir "ticking" değişkeni ve
requestAnimationFramekullanın.
- Büyük JSON.parse yükleri Büyük dosyaları ayrıştırmak (parsing) ana iş parçacığını (main thread) bloke eder. Bu da girdi gecikmesine (input lag) neden olur.
- Çözüm: Verileri ana iş parçacığı dışında ayrıştırmak için Web Workers kullanın.
- Karmaşık CSS seçici eşleştirmeleri Derinlemesine iç içe geçmiş veya karmaşık seçiciler, stil yeniden hesaplamalarını yavaşlatır.
- Çözüm: Düzen kaymalarını (layout shifts) bulmak için Lighthouse kullanın ve seçicilerinizi basitleştirin.
- Yinelenen bundle parçaları (chunks) Büyük ve optimize edilmemiş bundle'lar aktarım süresini boşa harcar.
- Çözüm: Yinelenen kodları bulup kaldırmak için
webpack-bundle-analyzerkullanın.
İlerlemenizi nasıl ölçersiniz:
- Chrome DevTools'u açın.
- Performance sekmesine gidin.
- 5 saniyelik bir oturum kaydedin.
- Main flame chart üzerinde 50ms'den uzun süren görevleri arayın.
- Bir düzeltme uygulayın ve Rendering ile Painting sürelerini karşılaştırın.
Bu alanları düzeltmek, Core Web Vitals değerlerinizi, özellikle de Largest Contentful Paint ve Interaction to Next Paint değerlerinizi iyileştirir.