Performansı Optimize Etmek İçin 10 JavaScript İpucu ve Püf Noktası

JavaScript, web geliştirme için çok önemlidir. Web sitelerinde göreceğiniz etkileşim ve animasyonların çoğunun arkasında dil vardır. Ancak JavaScript, kod kötü yazılmışsa bir web sitesinin yavaşlamasına da neden olabilir. Verimsizlikler, hem zayıf yükleme sürelerine hem de yavaş işleme hızına neden olabilir.

Web sitenizin hızını ve performansını artırmak için aşağıdaki uygulamaları benimseyin.

1. Değişkenleri Yerel Olarak Tanımlayın

Bir programcı olarak bilmeniz gerekenler kapsam belirleme nasıl çalışır. JavaScript'te iki tür değişken vardır: yerel değişkenler ve genel değişkenler.

Yerel değişkenler, bir fonksiyon bloğu içinde bildirilen değişkenlerdir. Kapsam, yalnızca bildirildikleri işlev içinde kalır. Genel değişkenler, komut dosyası boyunca erişilebilen değişkenlerdir. Global değişkenler söz konusu olduğunda, kapsam program boyunca kalır.

Bir değişkene erişmeye çalıştığınızda, tarayıcı kapsam araması olarak bilinen bir şey yapar. Değişken için en yakın kapsamı kontrol eder ve değişkeni bulana kadar aramaya devam eder. Bu nedenle, programınızda ne kadar çok kapsam zinciri varsa, mevcut kapsamın ötesindeki değişkenlere erişmek o kadar uzun sürer.

Bu nedenle, değişkenlerinizi her zaman yürütme bağlamına daha yakın tanımlamanız en iyisidir. Genel değişkenleri yalnızca nadir durumlarda kullanın; Örneğin, komut dosyası boyunca kullanılan verileri depolamak istediğinizde. Bu, programınızdaki kapsam sayısını azaltacak ve böylece performansı artıracaktır.

2. JavaScript'i Eşzamansız Olarak Yükle

JavaScript, tek iş parçacıklı bir programlama dilidir. Bu, bir işlev yürütüldüğünde, başka bir işlevin çalışabilmesi için sonuna kadar çalışması gerektiği anlamına gelir. Bu mimari, kodun iş parçacığını engelleyebileceği ve uygulamayı dondurabileceği durumlara yol açabilir.

İş parçacığının iyi performans göstermesini sağlamak için, belirli zaman kaybettiren görevleri eşzamansız olarak çalıştırmalısınız. Bir görev eşzamansız olarak çalıştığında, iş parçacığının tüm işlem gücünü kullanmaz. Bunun yerine işlev, diğer tüm kodların yürütülmesinden sonra tetiklendiği bir olay kuyruğuna katılır.

API çağrıları, çözülmesi zaman aldığından eşzamansız model için mükemmeldir. Bu nedenle, iş parçacığını tutması yerine, verileri eşzamansız olarak getirmek için getirme API'si gibi vaat tabanlı bir kitaplık kullanırsınız. Bu şekilde, tarayıcı API'den veri alırken diğer kodlar çalışabilir.

Eşzamansız programlamanın inceliklerini anlayın ve uygulamanızın performansını iyileştirin.

3. Gereksiz Döngülerden Kaçının

JavaScript'te döngüleri kullanma dikkatli olmazsanız pahalı olabilir. Bir öğe koleksiyonunda gezinmek, tarayıcıyı çok fazla zorlayabilir.

Kodunuzdaki döngülerden kesinlikle kaçınamasanız da, bunlar üzerinde mümkün olduğunca az çalışmanız gerekir. Koleksiyonda döngü yapma ihtiyacını ortadan kaldıran diğer teknikleri kullanabilirsiniz.

Örneğin, bir dizinin uzunluğunu döngünün her yinelemesinde okumak yerine farklı bir değişkende saklayabilirsiniz. Bir döngüden istediğinizi elde ederseniz, hemen ondan kurtulun.

4. JavaScript Kodunu Küçült

Küçültme, JavaScript kodunu optimize etmek için etkili bir yöntemdir. Küçültücü, ham kaynak kodunuzu daha küçük bir üretim dosyasına dönüştürür. Yorumları kaldırır, gereksiz sözdizimini kırpar ve uzun değişken adlarını kısaltırlar. Ayrıca kullanılmayan kodu kaldırırlar ve mevcut işlevleri daha az satır kaplayacak şekilde optimize ederler.

Küçültücülere örnek olarak Google Closure Compiler, UglifyJS ve Microsoft AJAX küçültücü verilebilir. Ayrıca, kodunuzu inceleyerek ve optimize etmenin yollarını arayarak manuel olarak küçültebilirsiniz. Örneğin, şunları yapabilirsiniz: kodunuzdaki if ifadelerini basitleştirin.

5. Büyük Dosyaları Gzip İle Sıkıştırın

Çoğu müşteri sıkıştırmak ve açmak için Gzip'i kullanın büyük JavaScript dosyaları. Bir tarayıcı bir kaynak istediğinde, sunucu yanıtta daha küçük bir dosya döndürmek için kaynağı sıkıştırabilir. İstemci dosyayı aldığında sıkıştırılmış dosyayı açar. Genel olarak, bu yaklaşım bant genişliğinden tasarruf sağlar ve gecikmeyi azaltarak uygulama performansını artırır.

6. DOM Erişimini En Aza İndirin

Tarayıcının her DOM güncellemesinde yenilenmesi gerektiğinden, DOM'a erişmek uygulamanızın performansını etkileyebilir. DOM erişimini mümkün olan en düşük frekansla sınırlamak en iyisidir. Bunu yapmanın bir yolu, tarayıcı nesnelerine referansları depolamaktır.

Gerçek DOM'a aktarmadan önce sanal DOM'da değişiklik yapan React gibi bir kitaplık da kullanabilirsiniz. Sonuç olarak, tarayıcı tüm sayfayı yenilemek yerine uygulamanın güncellenmesi gereken kısımlarını günceller.

7. Gereksiz JavaScript Yüklemesini Erteleyin

Sayfanızın zamanında yüklenmesi çok önemli olsa da, ilk yüklemede tüm işlevlerin çalışıyor olması gerekmez. Tıklanabilir bir düğmeniz ve JavaScript kodunu referans alan bir sekme menünüz olduğunu varsayalım; her ikisini de sayfa yüklenene kadar erteleyebilirsiniz.

Bu yöntem, işlem gücünü serbest bırakarak gerekli sayfa öğelerini zamanında oluşturmanıza olanak tanır. Sayfanın ilk görüntüsünü tutabilecek derleme kodunu geciktirirsiniz. Ardından, sayfanın yüklenmesi bittiğinde, işlevleri yüklemeye başlayabilirsiniz. Bu şekilde, kullanıcı hızlı yükleme süresinin keyfini çıkarabilir ve öğelerle zamanında etkileşim kurmaya başlayabilir.

Head öğenize en küçük miktarda CSS ve JavaScript de ekleyebilirsiniz, böylece hemen yüklenir. İkincil kod daha sonra ayrı .css ve .js dosyalarında yaşayabilir. Bu teknik iyi bir bilgi gerektirir. DOM nasıl çalışır?.

8. JavaScript Yüklemek için bir CDN kullanın

Bir içerik dağıtım ağı kullanmak, sayfa yükleme süresini hızlandırmaya yardımcı olur, ancak her zaman etkili değildir. Örneğin, bir ziyaretçinin ülkesinde yerel sunucusu olmayan bir CDN seçerseniz, bundan yararlanamazlar.

Bu sorunu çözmek için, çeşitli CDN'leri karşılaştırmak ve kullanım durumunuz için hangisinin en iyi performansı sunduğuna karar vermek için araçları kullanabilirsiniz. Kitaplığınız için hangi CDN'nin en iyi olduğunu öğrenmek için şuraya göz atın: cdnjs İnternet sitesi.

9. Bellek Sızıntılarını Giderin

Bellek sızıntıları, bir uygulamanın performansını olumsuz etkileyebilir. Sızıntılar, yüklenen sayfa belleği giderek daha fazla kapladığında meydana gelir.

Bellek sızıntısına bir örnek, uygulamayla uzun bir çalışma oturumundan sonra tarayıcınızın yavaşlamaya başlamasıdır.

Uygulamanızdaki bellek sızıntılarını algılamak için Chrome Geliştirici Araçları'nı kullanabilirsiniz. Araç, zaman çizelgesini performans sekmesinde kaydeder. DOM öğelerinin kaldırılması sonucunda birçok bellek sızıntısı meydana gelir. Çöp toplayıcı, yalnızca bu öğelere başvuran tüm değişkenler kapsam dışı olduğunda belleği serbest bırakacaktır.

Lighthouse, Google PageSpeed ​​Insights ve Chrome gibi araçlar, sorunları tespit etmenize yardımcı olabilir. Lighthouse erişilebilirlik, performans ve SEO sorunlarını kontrol eder. Google PageSpeed, uygulamanızın performansını artırmak için JavaScript'i optimize etmenize yardımcı olabilir.

Chrome tarayıcı, anahtar kelimenizde F12'yi tıklayarak değiştirebileceğiniz bir Geliştirici Araçları özelliği sağlar. Ağı açıp kapatmak ve CPU tüketimini kontrol etmek için performans analizini kullanabilirsiniz. Ayrıca, web sitenizi etkileyen sorunları ortaya çıkarmak için diğer ölçümleri de kontrol eder.

Bir web geliştiricisi olarak, web tarayıcınızda çok çalışacaksınız. Çoğu tarayıcı, web sitesi sorunlarını gidermenize yardımcı olacak bir dizi geliştirici aracıyla birlikte gelir. Google Chrome Geliştirici Araçları özelliği size yardımcı olacak birçok işleve sahiptir.