Modern web uygulamalarında hız, kullanıcı deneyiminin ve hatta arama motoru sıralamalarının temel taşıdır. Bir web sayfasının veya uygulamanın yavaş yüklenmesi, kullanıcıların sabrını zorlayabilir ve potansiyel ziyaretçilerin kaybedilmesine yol açabilir. Bu nedenle, kodumuzun ne kadar hızlı çalıştığını anlamak ve darboğazları tespit etmek büyük önem taşır. JavaScript’te kod bloklarımızın performansını hassas bir şekilde ölçmek için güçlü bir araca sahibiz: performance.now().
Neden performance.now() Kullanmalıyız?
Kod performansını ölçerken akla ilk gelen yöntemlerden biri Date.now() kullanarak başlangıç ve bitiş zamanlarını kaydetmek olabilir. Ancak Date.now(), milisaniye cinsinden bir zaman damgası dönse de, bu değer sistem saatine bağımlıdır. Yani, kullanıcının bilgisayarının saati değişirse veya senkronize edilirse, ölçümleriniz tutarsız hale gelebilir. Ayrıca, Date.now()‘ın çözünürlüğü, çok kısa süren operasyonlar için yeterince yüksek olmayabilir.
İşte tam bu noktada performance.now() devreye giriyor. Bu fonksiyon, yüksek çözünürlüklü bir zaman damgası üretir. En önemlisi, bu zaman damgası monotoniktir; yani her zaman ileriye doğru akar ve sistem saati değişikliklerinden etkilenmez. performance.now(), sayfa yükleme veya gezinme başlangıcından itibaren geçen süreyi milisaniye cinsinden, ondalık basamaklarla, çok daha yüksek bir hassasiyetle verir. Bu sayede, mikro-optimizasyonlar gerektiren veya çok hızlı çalışan kod bloklarının bile performansını doğru bir şekilde analiz edebiliriz.
var baslangic = performance.now();
for (let i = 0; i < 10 ** 4; i++){
// Burada performansını ölçmek istediğimiz kod bloğu yer alır
// Örneğin, karmaşık bir hesaplama veya DOM manipülasyonu
// console.log("????") gibi basit bir işlem bile süreyi etkiler
}
var bitis = performance.now();
console.log(`Kod performans testi: ${bitis - baslangic} milisaniye`);Yukarıdaki örnekte, bir döngünün ne kadar sürdüğünü ölçüyoruz. baslangic değişkeni, kod bloğunun çalışmaya başladığı anı kaydederken, bitis değişkeni ise bittiği anı yakalar. İki değer arasındaki fark, kod bloğunun toplam çalışma süresini milisaniye cinsinden verir. Bu basit ama etkili yöntem, performans darboğazlarını belirlemede ilk ve en önemli adımdır.
Kodun Derinliklerine İnme: Operatörler ve Şablon Değişmezleri
Üs Alma Operatörü (Exponentiation Operator – `**`)
Örnek kodda gördüğünüz 10 ** 4 ifadesi, JavaScript’in modern özelliklerinden biri olan üs alma operatörüdür. Bu operatör, bir sayının belirli bir kuvvete yükseltilmesini sağlar. Yani, 10 ** 4 demek 10’un 4. kuvveti, yani 10 × 10 × 10 × 10 demektir ve sonuç 10000’dir. Geleneksel olarak bu işlemi Math.pow(10, 4) ile yapabilirdik, ancak ** operatörü daha kısa, daha okunabilir ve matematiksel gösterime daha yakındır. Bu küçük detaylar, kod yazımını daha verimli ve anlaşılır hale getirme çabasının bir parçasıdır.
Şablon Değişmezleri (Template Literals – “ ` “)
Konsola çıktıyı bastığımız satırda tek tırnak yerine backtick (`) karakterini kullandığımıza dikkat etmişsinizdir. Bu, JavaScript’teki şablon değişmezleri (template literals) özelliğidir. Şablon değişmezleri, stringleri daha esnek ve güçlü bir şekilde oluşturmamızı sağlar. Geleneksel string birleştirmeye göre birçok avantajı vardır:
- Çok Satırlı Stringler: Şablon değişmezleri ile doğrudan birden fazla satıra yayılan stringler oluşturabilirsiniz, bu da HTML veya SQL sorguları gibi uzun metinler için çok kullanışlıdır.
- İfade Gömme:
${ifade}sözdizimini kullanarak JavaScript ifadelerini (değişkenler, fonksiyon çağrıları, aritmetik işlemler vb.) doğrudan string içine gömebilirsiniz. Bu, string birleştirmeyi çok daha temiz ve okunabilir hale getirir. Örneğimizdeki${bitis - baslangic}kısmı bunun harika bir örneğidir.
Performans Testi Yaparken Dikkat Edilmesi Gerekenler
Basit performance.now() kullanımları iyi bir başlangıç olsa da, doğru performans analizi için bazı ek faktörleri göz önünde bulundurmak önemlidir:
- Birden Fazla Çalıştırma: Tek bir ölçüm yanıltıcı olabilir. Kodu birden fazla kez çalıştırıp sonuçların ortalamasını almak, daha güvenilir veriler sağlar. Tarayıcıların JIT (Just-In-Time) derleyicileri, kodu ilk çalıştırmada optimize edebilir, bu da sonraki çalıştırmaların daha hızlı olmasına neden olabilir.
- Farklı Ortamlar: Kodu farklı tarayıcılarda (Chrome, Firefox, Safari vb.) ve farklı cihazlarda (masaüstü, mobil) test etmek, geniş bir kullanıcı kitlesi için performansı anlamanıza yardımcı olur.
- İzolasyon: Test ettiğiniz kod bloğunun diğer kodlardan veya dış faktörlerden (ağ istekleri, DOM yükü vb.) mümkün olduğunca izole olduğundan emin olun.
- Daha Derin Analiz: Basit zamanlama, bir başlangıç noktasıdır. Tarayıcı geliştirici araçlarındaki performans profilleri, CPU kullanımı, bellek tüketimi, kare hızı düşüşleri gibi daha derinlemesine metrikler sunar.
performance.mark()veperformance.measure()gibi API’lar, kodunuzun belirli bölümlerini işaretleyerek daha detaylı analiz yapmanızı sağlar.
Kod performansını sürekli olarak izlemek ve optimize etmek, sadece daha hızlı bir uygulama sunmakla kalmaz, aynı zamanda daha sağlam, verimli ve bakımı kolay bir kod tabanı oluşturmanıza da yardımcı olur. Her milisaniyenin önemli olduğu günümüz dijital dünyasında, bu tür araçlar ve teknikler, geliştiricilerin en değerli müttefikleridir. Unutmayın ki küçük optimizasyonlar birikerek büyük farklar yaratabilir ve kullanıcılarınızın sitenizle etkileşimini doğrudan etkiler.