Javascript Hızlandırma Yolları
Hepinize merhaba dostlarım 😊. Bu yazımda sizlere JavaScript programlama dili üzerinde hızlandırma işlemlerinden bahsedeceğim
Artık hız konusunun hayatımızın bir parçası olduğunu hemen hemen hepimiz biliyoruz. Özellikle yazılımların hızlı olmasını, sürekli yüklenip durmaması temel tercihlerimiz arasındadır. İşte bu noktada özellikle en sık karşılaştığımız uygulamalardan birisi olan web uygulamalarında sıklıkla karşılaştığımız JavaScript programlama dilinin hızlandırma yöntemlerine sözü daha fazla uzatmadan geçelim.
DÖNGÜ SAYISINI PRATİKLEŞTİRİN
Eveeeet geldik konumuzun ilk başlığına dostlarım. JavaScript programlama dili ile uğraşırken özellikle proje geliştirme sırasında karşımıza sıklıkla çıkan dizilerle uğraşırken yeri geliyor bu dizileri ekrana bastırmamız gerekebiliyor. Özellikle for döngüsü kullanıp bu döngüyü döndürmek istiyorsanız bu dizinin uzunluğunu almamız lazım oluyor. Normalde çok sık yapılan hatalardan birisi aşağıdaki şekildeki gibi olabiliyor
let dongu = ["Zafer YILDIZ","Emrullah TANIMA","Muhammed Fatih BAĞCIVAN","Aylin DURAN"];
for (i=0; i < dongu.length; i++){
console.log(dongu[i]);
}şeklinde bir kullanım hemen hemen her zaman kullanılıyor. Kod çalışmaz mı diye merak ediyorsunuz. Kod çalışır lakin döngünün döneceği her zaman dongu dizisinin eleman sayısı sürekli ama sürekli her adımda kontrol edilir. Bu da programımıza ekstra bir yük olur ve kodumuzun biraz yavaş çalışmasına yani performans düşüklüğüne yol açabilir. Bu aslında sadece javascript programlama dilinde değil diğer programlama dillerinde de olabilecek bir durumdur. Bu durumda bizim yapmamız gereken şey ise dizi sayısını ek bir değişkende tutup döngünün tekrar sayısını o değişkenden alıp işlemesini sağlamak daha yararlı bir yol olacaktır. Yani aşağıdaki kodda göstermek gerekirse
let dongu = ["Zafer YILDIZ","Emrullah TANIMA","Muhammed Fatih BAĞCIVAN","Aylin DURAN"];
const sayac = dongu.length;
for (i=0; i < sayac; i++){
console.log(dongu[i]);
}şeklinde dizi sayısını ekstra bir değişkenden alıp döngümüzü çalıştırmak bizim kodumuzun çalışması için daha performanslı bir yol olacaktır ve döngünün her adımında tekrar tekrar dizimizi sayma işlemini gerçekleştirmek yerine dizi eleman adedini tuttuğumuz bir değişken üzerinden pratik bir şekilde kontrol edip işlemleri gerçekleştirecektir.
DOM ERİŞİMİNİ DEĞİŞKENDE TUTUN
Bir javascript geliştircisiyseniz ve özellikle web uygulamaları üzerinde çalışıyorsanız dom konusu ile içli dışlı olmanız gerekmektedir. Yani html elementlerine erişip onların içeriğini değiştirme, içerisindeki değeri alma gibi bir sürü durumla karşı karşıya kalacağınız durumlar söz konusudur. İşte bu durumda biz geliştiriciler tarafından hemen hemen yapılan hatalardan birisi ise dom erişimini değişken üzerinde tutumamaktır. Yani kod üzerinden gösterecek olursak
<p id="paragfraf"></p>
<script>
document.getElementById("paragraf").innerHTML="MFSoftware Blog";
</script>şeklinde bir kullanım sıklıkla kullanılıyor. Bu kullanımı yapanlar arasında ben de varım :). Şimdi düşünsenize hadi bir tane kullandık geeçtik. Peki ya 50-100 kere bu işlemi yaptığımız varsayarsak javascript üzerine ne kadar yük binecek hiç düşündük mü ? Hayır sadece program çalışsın yeter diye bir algı oluşturduk ve kodumuzu yazdık. Bu özellikle büyük projelerde asla ama asla yapmamamız gereken bir algıdır dostlar. İşte bu durumda bizim yapacağımız performans iyileştirmesi
<p id="paragfraf"></p>
<script>
var element = document.getElementById("paragraf");
element.innerHTML = "MFSoftware Blog";
</script>şeklinde olacaktır. Gördüğünüz gibi dom işlemleri için sürekli ama sürekli document.getElementById() kullanmak yerine bunu bir değişkene aktarıp projemizin her yerinde gönül rahatlığıyla performanslı bir şekilde kullanabiliriz.
DOM SAYISINI OLABİLDİĞİNCE AZ TUTUN
Bu konu aslında önceki başlığın bir devamı niteliğinde diyebilirim. Özellikle web uygulaması geliştiriyorsanız bu konuyu sürekli ama sürekli göz önünde tutmanızı tavsiye ederim. Web uygulamaları geliştirirken dom sayısını ne kadar fazla tutarsanız uygulamanızdaki performans sayısını da bir o kadar düşer, geç açılma olayları, kasma olayları karşınıza çıkabilir. Özellikle seo dostumuzun da pek hoşlanmadığı bir konudur bu. Bu sebepten dolayı dom sayısını az tutmamız bizim uygulamalarımızda hem performans hem de seo işlemlerinde kolaylık olması için doğru bir seçim olacaktır.
GEREKSİZ DEĞİŞKEN KULLANIMI YAPMAYIN
Geldik bir diğer konumuz olan ve özellikle javascript programlama dili olsun, diğer programlama dilleri olsun yeni başlayan dostlarımızın yaptığı ufak hatalardan birisi olan gereksiz değişken kullanımı olayına. Normalde bu yapı çalışmaz değil çalışır ama biraz performanssız çalışır. Çünkü oluşturulan her bir değişken için bellekten bir yer ayrılıyor ve bu değişkenimizin değeri tutuluyor. Gereksiz değişken kullanımına kodlama üzerinde bakacak olursak
<p id="paragraf"></p>
<script>
var marka = "Volkswagen";
var model = "Polo";
var car = marka + " " + model;
var element = document.getElementById("paragraf");
element.innerHTML = car;
</script>şeklinde iki ayrı değişkeni birleştirip daha sonra bunu da ayrı bir değişkene aktarmak biraz performanssız bir yöntem olacaktır. Bunun için bizim yapmamız gereken şey performans açısından
<p id="paragraf"></p>
<script>
var marka = "Volkswagen";
var model = "Polo";
var element = document.getElementById("paragraf");
element.innerHTML = marka + " " + model;
</script>şeklinde olacaktır. Fark ettiğiniz gibi iki değeri birleştirip ayrı bir değişkende tutmak yerine bu iki değişkeni innerHTML kısmına aktarırken birleştirmemiz daha performanslı bir yol olacaktır.
JAVASCRIPT DOSYALARINI EN ALT KISIMDA YÜKLEYİN
Geldik bir diğer aşamaya :). Bir web uygulama geliştirici olarak her zaman dikkat ettiğim bir konudur ve dikkat edilmesi konulardan birisi niteliğindedir bu başlık. Zaman geliyor kendi javascript kodlarımızı, fonksiyonlarımızı yazıyoruz. İşte bunları sayfaya dahil etmemiz gerektiği zaman </body> tag'inin bir üst kısmında tanımlamamız gerekmektedir. Kod üzerinde gösterecek olursak
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Hızlandırma | MFSoftware Blog</title>
</head>
<body>
<script src="assets/custom.js"></script>
</body>
</html>şeklinde gördüğümüz üzere sayfanın en alt kısmında yani </body> tag'inin bir üst kısmında javascript kodlarımızı sayfamıza dahil etmemiz bizim için yararlı olacaktır. Eğer javascript kodlarını üst kısımlarda tanımlayacak olursak sayfa yüklenirken uzun uzun javascript kodlarını yükleme durumu olacaktır. Özellikle olası bir hata durumunda sayfamız açılmayacaktır. İşte bu ve bunun gibi sorunların olmaması için javascript kodlarını </body> tag'inin bir üstünde tutmamız bizim projemiz için yararlı bir yol olacaktır.
Eveeeet dostlarım 😊. Bu yazımda sizlere javascript programlama dili üzerinde süreçleri nasıl hızlandırırız, nasıl performanslı bir şekilde kod yazarız bunlardan elimden geldiğince dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Eksik veya hatalı bir anlatım yapmış isem benimle iletişime geçmekten çekinmeyin :). Projelerinizde özellikle ve özellikle performans ve hız konusunu aklınızda bulundurun ve buna göre programlama işlemini gerçekleştirin. İleriki zamanlarda güzel sonuçlar alacaksınız :)
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer