JavaScript kodunuzu nasıl hızlandırırsınız?
Döngüler programlamada sıklıkla kullanılır.
For ifadesi de dahil olmak üzere döngüdeki her ifade, döngünün her yinelemesinde yürütülür. döngü.
Döngünün dışına yerleştirilebilecek ifadeler veya atamalar döngü daha hızlı çalışır.
for (let i = 0; i < arr.length; i++) {let l = arr.length;
for (let i = 0; i < l; i++) {Hatalı kod, döngü her başlatıldığında dizinin uzunluk özelliğine erişir. yinelendi.
Daha iyi kod, döngü dışındaki uzunluk özelliğine erişir ve döngü daha hızlı çalışır.
HTML DOM'a erişim, diğer JavaScript ifadeleriyle karşılaştırıldığında çok yavaştır.
Bir DOM öğesine birkaç kez erişmeyi düşünüyorsanız, ona bir kez erişin ve yerel bir değişken olarak:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";Kendiniz Deneyin →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Performance</h2>
<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>
<p id="demo"></p>
<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
HTML DOM'daki öğelerin sayısını küçük tutun.
Bu her zaman olacak özellikle küçük cihazlarda sayfa yüklemeyi iyileştirin ve oluşturmayı (sayfa görüntüleme) hızlandırın.
DOM'da arama yapmaya yönelik her girişim (getElementsByTagName gibi) fayda sağlayacaktır daha küçük bir DOM'dan.
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;Komut dosyalarınızı sayfa gövdesinin altına yerleştirmek, tarayıcının önce sayfa.
Bir komut dosyası indirilirken tarayıcı başka bir komut dosyasını başlatmayacak İndirilenler. Ayrıca tüm ayrıştırma ve işleme etkinlikleri engellenebilir.
HTTP spesifikasyonu, tarayıcıların birden fazla indirmemesi gerektiğini tanımlar. paralel olarak iki bileşen.
Bir alternatif, komut dosyası etiketinde defer="true" kullanmaktır. defer özelliği, betiğin sayfa açıldıktan sonra çalıştırılması gerektiğini belirtir. ayrıştırma tamamlandı, ancak yalnızca harici komut dosyaları için çalışıyor.
Mümkünse, sayfa yüklendikten sonra komut dosyanızı koda göre sayfaya ekleyebilirsiniz:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>with anahtar kelimesini kullanmaktan kaçının. Üzerinde olumsuz etkisi var hız. Ayrıca JavaScript kapsamlarını da karıştırır.
Katı modda with anahtar kelimesine izin verilmez.