JavaScript Performansı
JavaScript kodunuzu nasıl hızlandırabilirsiniz.
Döngülerdeki Aktiviteyi Azaltın
Döngüler genellikle programlamada kullanılır.
For ifadesi de dahil olmak üzere bir döngüdeki her ifade, döngünün her yinelemesi için yürütülür.
Döngünün dışına yerleştirilebilecek ifadeler veya atamalar, döngünün daha hızlı çalışmasını sağlayacaktır.
Kötü:
for (let i = 0; i < arr.length; i++) {
Daha İyi Kod:
let l = arr.length;
for (let i = 0; i < l; i++) {
Hatalı kod, döngü her yinelendiğinde bir dizinin uzunluk özelliğine erişir.
Daha iyi kod, uzunluk özelliğine döngü dışında erişir ve döngünün daha hızlı çalışmasını sağlar.
DOM Erişimini Azaltın
HTML DOM'a erişim, diğer JavaScript ifadelerine kıyasla çok yavaştır.
Bir DOM öğesine birkaç kez erişmeyi düşünüyorsanız, ona bir kez erişin ve onu yerel değişken olarak kullanın:
Örnek
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
DOM Boyutunu Küçült
HTML DOM'deki öğe sayısını küçük tutun.
Bu, özellikle daha küçük cihazlarda her zaman sayfa yüklemeyi iyileştirecek ve oluşturmayı (sayfa görüntüleme) hızlandıracaktır.
DOM'de (getElementsByTagName gibi) her arama denemesi daha küçük bir DOM'den yararlanacaktır.
Gereksiz Değişkenlerden Kaçının
Değerleri kaydetmeyi planlamıyorsanız yeni değişkenler oluşturmayın.
Genellikle kodu şu şekilde değiştirebilirsiniz:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Bununla:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
JavaScript Yüklemeyi Geciktir
Komut dosyalarınızı sayfa gövdesinin altına koymak, tarayıcının önce sayfayı yüklemesini sağlar.
Bir komut dosyası indirilirken tarayıcı başka indirmeleri başlatmaz. Ayrıca tüm ayrıştırma ve işleme etkinlikleri engellenebilir.
HTTP spesifikasyonu, tarayıcıların ikiden fazla bileşeni paralel olarak indirmemesi gerektiğini tanımlar.
Bir alternatif, defer="true"komut dosyası etiketinde kullanmaktır. erteleme özelliği, komut dosyasının sayfanın ayrıştırılması tamamlandıktan sonra yürütülmesi gerektiğini belirtir, ancak yalnızca harici komut dosyaları için çalışır.
Mümkünse, sayfa yüklendikten sonra komut dosyanızı kodla sayfaya ekleyebilirsiniz:
Örnek
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
ile kullanmaktan kaçının
Anahtar kelimeyi kullanmaktan kaçının with. Hız üzerinde olumsuz bir etkisi vardır. Ayrıca JavaScript kapsamlarını karıştırır.
Anahtar withkelimeye katı modda izin verilmez .