JavaScript Performansı

JavaScript kodunuzu nasıl hızlandırabilirsiniz.

Döngü içindeki faaliyetleri azaltın

Programlama döngüler sıkça kullanılır.

Döngü her döngüde, döngü içindeki her ifade, dâhilinde for ifadeleri, her biri çalıştırılacaktır.

Döngü dışında konulabilir olan ifadeler veya atamalar döngü hızını artırır.

Kötü kod:

var i;
for (i = 0; i < arr.length; i++) {

Daha iyi kod:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

Döngü her döngüde, kötü kodun dizinin length özellikleri.

İyi kod döngü dışında erişir length özellikleri, döngü daha hızlı çalışır.

DOM Erişimlerini Azalt

JavaScript ile karşılaştırıldığında, HTML DOM'a erişim çok yavaş.

Eğer bir DOM elementine birden fazla kez erişim bekliyorsanız, sadece bir kez erişin ve yerel bir değişkende kullanın:

Örnek

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Kişisel olarak deneyin

DOM Ölçeğini Azalt

HTML DOM'daki eleman sayısını mümkün olduğunca az tutun.

Bu, her zaman sayfa yüklemeyi artırır ve renderlemeyi (sayfa görüntüleme) hızlandırır, özellikle küçük cihazlarda.

DOM'u her arama denemesi (örneğin getElementsByTagNameBunlar daha küçük bir DOM'dan yararlanacak.

Gerekli olmayan değişkenlerden kaçının

Değer saklamayı planlamadığınız yeni değişkenler oluşturmayın.

Genellikle bu kodu değiştirebilirsiniz:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Bu kodu kullanın:

document.getElementById("demo").innerHTML = firstName + " " + lastName

JavaScript Yükleme Geciktir

Sayfanın altına betiği koyun, tarayıcı önce sayfayı yükler.

脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。

İndirirken, tarayıcı diğer tüm indirmeleri başlatmaz. Ayrıca, tüm çözümleme ve renderleme faaliyetleri de engellenebilir.

HTTP Standartları, tarayıcıların iki türden fazla bileşeni paralel olarak indirmemesi gerektiğini tanımlar. Bir seçenek, script etiketi içindedefer="true"

Mümkünse, sayfa yüklendikten sonra sayfaya kod ile script ekleyebilirsiniz:

Örnek

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

with Kullanmaktan Kaçının

Kullanmaktan Kaçının with Anahtar Kelimesi. Hız üzerinde olumsuz etki yapar. Ayrıca JavaScript Kapsamını da karıştırabilir.

Sıkı Moddaİzinsiz with Anahtar Kelimesi.