Modern web uygulamaları giderek daha karmaşık hale geldikçe, kullanıcı deneyimi için kod performansının önemi de artmaktadır. Hızlı yüklenen sayfalar, akıcı animasyonlar ve anında yanıt veren arayüzler, kullanıcıların bir web sitesinden veya uygulamadan beklentilerinin başında gelir. Ancak bazen kodumuzun belirli bir bölümünün ne kadar hızlı çalıştığını veya bir performans darboğazına neden olup olmadığını anlamak zor olabilir. İşte tam da bu noktada, JavaScript’te kod performansını hassas bir şekilde ölçmek için güçlü bir araç olan performance.now() devreye girer.
Neden Performans Önemli ve Neden Doğru Ölçmeliyiz?
Kullanıcıların sabırsız olduğu dijital çağda, milisaniyeler bile fark yaratabilir. Yavaş çalışan bir kod bloğu, özellikle döngüler veya yoğun hesaplamalar içeren durumlarda, tüm uygulamanın donmasına veya gecikmesine neden olabilir. Bu durum, kullanıcıların uygulamanızdan uzaklaşmasına yol açabilir. Performans sorunlarını doğru bir şekilde tespit edebilmek için, kodumuzun çalışma süresini doğru ve güvenilir bir şekilde ölçmek kritik öneme sahiptir. Yanlış ölçümler, yanlış optimizasyonlara ve boşa harcanan çabaya yol açabilir.
Date.now() Neden Yetersiz Kalır?
Birçok geliştirici, kod bloklarının çalışma süresini ölçmek için ilk olarak Date.now() yöntemine başvurabilir. Bu yöntem, Unix Epoch’tan bu yana geçen milisaniye sayısını döndürür ve basit zaman damgaları oluşturmak için oldukça kullanışlıdır. Ancak performans ölçümü söz konusu olduğunda, Date.now()‘un bazı önemli dezavantajları vardır:
- Düşük Çözünürlük:
Date.now()genellikle milisaniye cinsinden tam sayı değerleri döndürür ve daha yüksek hassasiyet sunmaz. Bu da çok hızlı çalışan kod blokları için yeterince doğru olmayabilir. - Sistem Saati Bağımlılığı:
Date.now(), bilgisayarın sistem saatine bağlıdır. Sistem saati ileri veya geri ayarlanırsa, ölçümlerinizde tutarsızlıklar meydana gelebilir. Bu durum, özellikle uzun süreli performans izlemeleri veya farklı cihazlarda karşılaştırmalar yaparken sorun teşkil eder.
performance.now() ile Tanışın: Yüksek Çözünürlüklü Zaman Damgaları
İşte bu noktada performance.now(), performans testleri için çok daha üstün bir çözüm sunar. performance.now(), yüksek kararlılıkta zaman damgaları (DOMHighResTimeStamp) üretir. Bu, milisaniyenin kesirli kısımlarını da içeren çok daha hassas ölçümler yapabileceğiniz anlamına gelir. Ayrıca, sistem saatinden bağımsız, monotonik bir saat kullanır; yani saat her zaman ileri doğru akar ve sistem saati değişikliklerinden etkilenmez. Bu, performans ölçümlerinizin tutarlılığını ve güvenilirliğini artırır.
Peki, performance.now()‘u kodumuzda nasıl kullanırız? İşte basit bir örnek:
var baslangic = performance.now();
for (let i = 0; i < 10 ** 4; i++){
// Burası performansını ölçmek istediğimiz kod bloğu
// console.log("????") // Gerçek uygulamada bu tür bir konsol çıktısı döngü içinde performansı etkiler.
}
var bitis = performance.now();
console.log(`Kod performans testi: ${bitis - baslangic} milisaniye`);Bu örnekte, kod bloğumuzun başlangıcında performance.now() ile bir zaman damgası alıyor, kod bloğu bittikten sonra tekrar bir zaman damgası alıyor ve aradaki farkı hesaplayarak kodun çalışma süresini milisaniye cinsinden öğreniyoruz. Elde edilen değer, kodunuzun ne kadar hızlı çalıştığına dair çok net bir fikir verir.
Üslü Sayı Operatörü (Exponentiation Operator) `**`
Yukarıdaki örnekte 10 ** 4 ifadesini fark etmiş olabilirsiniz. Bu, JavaScript’te ES2016 ile gelen yeni bir operatör olan üslü sayı operatörüdür. 10 ** 4 ifadesi, 10’un 4. kuvveti anlamına gelir, yani 10 * 10 * 10 * 10 veya kısaca 10000 demektir. Bu operatör, matematiksel işlemleri daha okunaklı ve kısa bir şekilde yazmamızı sağlar.
Şablon Değişmezleri (Template Literals)
Konsola çıktıyı bastığımız kısımda tek tırnak (') veya çift tırnak (") yerine backtick (`) karakterini kullandık. Bu yapıya şablon değişmezleri (template literals) denir. Şablon değişmezleri, çok satırlı string ifadeleri kolayca yazmamızı ve string içine değişkenleri veya ifadeleri ${expression} şeklinde doğrudan gömmemizi sağlar. Bu, özellikle dinamik mesajlar oluştururken veya HTML şablonları yazarken kodu çok daha temiz ve okunabilir hale getirir.
Performans Testinde İleri Adımlar ve Dikkat Edilmesi Gerekenler
performance.now() harika bir başlangıç noktası olsa da, performans testi yaparken göz önünde bulundurmanız gereken bazı ek faktörler vardır:
- `console.log` Overhead: Kod örneğinde yorum satırına aldığım gibi, döngü içinde
console.log()gibi işlemler yapmak, ölçtüğünüz kodun gerçek performansını yanıltıcı bir şekilde artırabilir. Konsola yazma işlemleri zaman alır ve bu da ölçümünüze dahil olur. Gerçek performans testi yaparken bu tür yan etkilerden kaçınmak önemlidir. - Ortam Farklılıkları: Kodunuzun performansı, farklı tarayıcılarda, farklı cihazlarda ve farklı işletim sistemlerinde değişiklik gösterebilir. En doğru sonuçlar için, kodunuzu hedeflediğiniz ortamlarda test etmelisiniz.
- JIT Optimizasyonları: JavaScript motorları (V8 gibi), kodu çalıştırırken “Just In Time” (JIT) derleme ve optimizasyonlar yapar. Bu, aynı kod bloğunun ilk çalıştığında daha yavaş, sonraki çalıştırmalarda ise daha hızlı olabileceği anlamına gelir. Güvenilir sonuçlar elde etmek için testleri birkaç kez çalıştırmak ve ortalamasını almak faydalı olabilir.
- Büyük Resim:
performance.now()mikro-optimizasyonlar ve belirli kod bloklarının hızını ölçmek için mükemmeldir. Ancak uygulamanızın genel performansını değerlendirmek için tarayıcıların Geliştirici Araçlarındaki “Performans” sekmesi gibi daha kapsamlı araçları kullanmak daha doğru bir yaklaşımdır. Bu araçlar, ağ istekleri, render süresi, bellek kullanımı gibi birçok farklı metriği izlemenizi sağlar.
JavaScript’te performans ölçümü, sadece sayıları görmekle kalmayıp, bu sayıların ne anlama geldiğini anlamak ve kodunuzu daha verimli hale getirmek için bilinçli kararlar almakla ilgilidir. performance.now() gibi araçlar, bize bu süreçte paha biçilmez içgörüler sunar. Küçük optimizasyonların bile bir araya geldiğinde kullanıcı deneyimi üzerinde büyük bir etkisi olabileceğini unutmamak gerekir. Bu nedenle, geliştirme sürecinizin bir parçası olarak performansı düzenli olarak test etmek ve iyileştirmek, modern web geliştiriciliğinin ayrılmaz bir parçası olmalıdır. Uygulamalarımızı daha hızlı ve daha duyarlı hale getirerek, kullanıcılarımıza hak ettikleri sorunsuz deneyimi sunabiliriz.