Web uygulamalarının performansı, kullanıcı deneyimini doğrudan etkileyen en kritik faktörlerden biridir. Günümüzde web siteleri sadece statik metinlerden oluşmuyor; aksine, yoğun etkileşimli, animasyonlu ve veri güdümlü arayüzler sunuyorlar. Tüm bu dinamizmi sağlayan ana güç ise JavaScript'tir. Ancak JavaScript kodunuz doğru optimize edilmediğinde, uygulamanızda donmalar, yavaş yüklemeler ve batarya tüketiminde artışlar gözlemlenebilir. Bu yazıda, JavaScript performansını maksimize etmek için uygulayabileceğiniz temel ve ileri düzey teknikleri inceliyoruz.
1. Lazy Loading ve Code Splitting (Kod Bölme)
Uygulamanız büyüdükçe, gönderdiğiniz JavaScript dosyasının (bundle) boyutu da aynı oranda artar. Tüm kodu tek bir devasa dosya halinde sunmak, ilk yükleme süresini (First Contentful Paint - FCP) dramatik şekilde yavaşlatır. Bunun önüne geçmek için Code Splitting tekniği kullanılır.
Webpack, Vite veya Rollup gibi modern derleyiciler yardımıyla uygulamanızı parçalara ayırabilirsiniz. Kullanıcının henüz görmediği veya etkileşime girmediği sayfaların kodları sadece ihtiyaç anında yüklenir. Buna Lazy Loading denir. Örneğin, sitenizin alt kısmında yer alan karmaşık bir harita modülü, kullanıcı o bölüme kaydırmadığı sürece indirilmez, böylece başlangıçtaki sayfa yüklemesi son derece hızlanır.
2. Debounce ve Throttle ile Olay Yönetimi
Arama kutularına yazı yazılması (keyup), pencerenin yeniden boyutlandırılması (resize) veya sayfanın kaydırılması (scroll) gibi eylemler saniyede onlarca kez tetiklenebilir. Eğer her tetiklenmede API çağrısı yapar veya ağır DOM hesaplamaları gerçekleştirirseniz, tarayıcınız tıkanır.
- Debounce: Belirli bir süre boyunca yeni bir olay tetiklenmezse işlemi gerçekleştirir. Örneğin, kullanıcı arama çubuğuna yazmayı bitirdiğinde arama isteğinin gitmesini sağlar.
- Throttle: Bir işlemi belirli zaman aralıklarında yalnızca bir kez çalışmaya zorlar. Örneğin, kullanıcı sayfayı ne kadar hızlı kaydırırsa kaydırsın, kaydırma animasyonunu saniyede en fazla 60 kere günceller.
3. Verimli DOM Manipülasyonu
DOM (Document Object Model) işlemlerinin maliyeti her zaman yüksektir. JavaScript'te bir elementi seçmek veya içeriğini değiştirmek, tarayıcının tüm sayfayı yeniden hesaplamasına (Reflow/Repaint) sebep olabilir. Bunu engellemek için şu kurallara dikkat edilmelidir:
DOM'a sürekli erişmek yerine, yapmak istediğiniz değişiklikleri bir DocumentFragment nesnesinde toplayın ve hepsini tek seferde DOM'a ekleyin. Ayrıca querySelector çağrılarını döngülerin dışında yapmaya özen gösterin.
4. Web Workers ile Ana İş Parçacığını Rahatlatmak
JavaScript tek iş parçacıklı (single-threaded) bir dildir; yani aynı anda yalnızca tek bir işlem yapabilir. Eğer devasa bir veri kümesini filtrelemek veya karmaşık bir şifreleme algoritması çalıştırmak isterseniz, işlem bitene kadar tüm arayüz kilitlenir.
İşte bu noktada Web Workers devreye girer. Web Workers, ağır hesaplamalı JavaScript kodlarını arka planda ayrı bir iş parçacığında (thread) çalıştırmanıza olanak tanır. Arayüzünüz (UI) her zamanki gibi akıcı kalırken, arka planda veri işlenmeye devam eder ve bittiğinde sonucu ana thread'e geri gönderir.
5. requestAnimationFrame Kullanımı
Animasyonlar için eskiden sıkça kullanılan setTimeout veya setInterval yöntemleri, monitörün yenileme hızından (genellikle 60Hz) bağımsız çalıştığı için kare atlamalarına ve pürüzlü görüntülere sebep olabilir.
Daha akıcı animasyonlar için daima requestAnimationFrame kullanılmalıdır. Bu API, tarayıcıya bir animasyon yapmak istediğinizi bildirir ve tarayıcı, bir sonraki yeniden boyama (repaint) işleminden hemen önce sizin belirlediğiniz işlevi çağırır. Böylece pil tasarrufu sağlanır ve sekme arka planda kaldığında animasyon otomatik olarak durdurulur.
Sonuç
Performans optimizasyonu tek seferlik bir iş değil, sürekli bir süreçtir. Lighthouse, Chrome DevTools ve Web Vitals eklentileri kullanarak sitenizin zayıf yönlerini tespit edebilir ve yukarıdaki teknikleri uygulayarak son kullanıcıya kusursuz, hızlı ve tepkisel (responsive) web uygulamaları sunabilirsiniz.
← Blog'a Dön