JavaScript Performans İpuçları

Sayfa açılıyor. Görsel geliyor. Ama butonlar bir saniye boyunca tepki vermiyor. Bu tanıdıksa, sorun büyük ihtimalle JavaScript'te.

JavaScript tek iş parçacığında çalışır. Yani tarayıcı sizin kodunuzu işlerken başka hiçbir şey yapamaz. Kaydırma donar, tıklamalar birikir, animasyonlar takılır. İyi haber: yavaşlığın nedenleri sınırlı sayıda ve hepsi ölçülebilir.

Aşağıda önce ölçmeyi, sonra düzeltmeyi anlatıyorum. Sırayı bozmayın. Ölçmeden yapılan javascript hızlandırma denemeleri genelde kodu karmaşıklaştırır, hızı değiştirmez.

Yavaşlığı Bulmak: Tahmin Etmeyi Bırak, Ölç

Optimizasyona başlamanın tek doğru yolu var: nerede zaman harcandığını görmek. Tarayıcının geliştirici araçları bunun için yeter.

Performance sekmesiyle kayıt al

• Geliştirici araçlarını aç, Performance sekmesine geç.
• Kayıt düğmesine bas, sayfayı yenile, 5-6 saniye sonra durdur.
• Sarı bloklara bak. Sarı = script çalıştırma süresi.
• 50 milisaniyeden uzun tek bir blok gördüysen, orası "uzun görev" sayılır. Kullanıcı bunu hissediyor.
• Call Tree bölümünde fonksiyonları süreye göre sırala. En üstteki üç fonksiyon senin işin.

CPU kısıtlaması ayarını 4x yavaşlat konumuna almayı alışkanlık yap. Kendi bilgisayarın gerçek kullanıcıyı temsil etmiyor.

Kod içinde kaba ölçüm

Şüphelendiğin bir bloğu izole etmek için basit sayaçlar yeter:

• console.time ve console.timeEnd: aynı etiketle sarmala, süreyi konsolda gör.
• performance.now(): iki ölçüm arasındaki farkı al, daha hassas sonuç verir.
• Aynı ölçümü 5 kez tekrarla, ortalamasını not et. Tek ölçüm yanıltır.
• Ölçümleri bir yere yaz. Optimizasyondan sonra "eskiden ne kadardı" sorusunun cevabı olmalı.

Ağ tarafını ayır

Bazen kod hızlıdır, dosya büyüktür. İkisi farklı problem.

• Network sekmesinde script dosyalarını boyuta göre sırala.
• Sıkıştırılmış boyutu (transferred) ve gerçek boyutu (size) karşılaştır. Sunucuda sıkıştırma kapalıysa fark görünmez.
• Coverage aracını çalıştır. Kullanılmayan kod oranı yüzde 50'yi geçiyorsa paketleme ayarlarına dönmen gerekir.
• Üçüncü parti scriptleri ayrıca listele. Reklam, analitik, sohbet kutusu... Toplamı çoğu zaman kendi kodundan büyüktür.

Düzeltmek: En Çok Kazandıran Beş Hamle

Ölçtün, suçluyu buldun. Şimdi sıra çözümde. Sıralama kabaca kazanç büyüklüğüne göre.

Ana iş parçacığını serbest bırak

• Script etiketlerine defer ekle. HTML ayrıştırması kesilmez, sıra korunur.
• Birbirinden bağımsız, DOM'a dokunmayan scriptler için async uygun.
• Uzun döngüleri parçala. Her 50 iterasyonda kontrolü tarayıcıya bırak.
• Ağır hesaplamayı Web Worker'a taşı. Görüntü işleme, büyük veri filtreleme, şifreleme buraya çok yakışır.
• Kaydırma, yeniden boyutlandırma ve klavye olaylarında debounce veya throttle kullan. Saniyede 60 kez çalışan bir fonksiyon çoğu zaman gereksizdir.

DOM'a az dokun

DOM işlemleri pahalıdır. Özellikle okuma ve yazmayı sırayla yaparsan tarayıcıyı sürekli yeniden hesaplamaya zorlarsın.

• Döngü içinde innerHTML güncellemek yerine parçaları bir dizide topla, sonda tek seferde bas.
• offsetHeight, getBoundingClientRect gibi ölçüm çağrılarını yazma işlemlerinden ayır. Önce hepsini oku, sonra hepsini yaz.
• Animasyonda top ve left değiştirmek yerine transform kullan. Yerleşim yeniden hesaplanmaz.
• Yüz tane elemana ayrı ayrı dinleyici bağlamak yerine üst elemana tek dinleyici koy, olay hedefini kontrol et.
• Sık eriştiğin elemanı bir değişkende tut. Her seferinde sorgulama.

Gönderdiğin kodu küçült

• Kullanmadığın kütüphaneleri çıkar. Tarih biçimlendirmek için koca bir paket taşımak gereksiz.
• Kütüphaneden tek fonksiyon kullanıyorsan yalnızca onu içe aktar.
• Kod bölme uygula. Modal, grafik, editör gibi parçalar ilk açılışta gerekmiyorsa dinamik içe aktarmayla iste.
• Görünür alan dışındaki bileşenleri IntersectionObserver ile tetikle.
• Üretim yapısında küçültme ve ölü kod ayıklamanın açık olduğunu doğrula.

Doğru veri yapısını seç

• Bir listede sürekli arama yapıyorsan diziyi bırak, Map veya Set kullan.
• İç içe iki döngü görürsen dur. Genelde tek geçişte sözlük kurup çözülür.
• Aynı girdiyle aynı sonucu üreten pahalı fonksiyonları önbelleğe al.
• Ağdan gelen veriyi işlemeden önce boyutunu kontrol et. Sunucu tarafında filtrelemek her zaman daha ucuz. Veri tabanı sorgularını hızlandırma konusu bu noktada devreye girer.

Hızlı kontrol listesi