• Toplu Güncellemeler: Tek seferde birden fazla DOM elemanı eklerken veya güncellerken, her bir elemanı ayrı ayrı manipüle etmek yerine, değişiklikleri biriktirip tek bir işlemle DOM'a uygulamak çok daha verimlidir. Örneğin, bir döngü içinde 100 eleman eklemek yerine, bu elemanları önce bir DocumentFragment'a ekleyip, sonra DocumentFragment'ı tek seferde DOM'a ekleyebilirsiniz.
• DocumentFragment Kullanımı: DocumentFragment sanal bir DOM düğümüdür ve belgenin bir parçası gibi davranır ancak asıl DOM ağacının bir parçası değildir. Bu sayede üzerinde yapılan değişiklikler yeniden düzenlemeye (reflow) veya yeniden boyamaya (repaint) neden olmaz.

// Kötü örnek: Her döngüde DOM'a erişim
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Eleman ${i}`;
  document.body.appendChild(div); // Her adımda DOM manipülasyonu
}

// İyi örnek: DocumentFragment kullanarak toplu manipülasyon
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Eleman ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // Tek seferde DOM manipülasyonu

"DOM manipülasyonu, web performansında sıklıkla göz ardı edilen bir darboğazdır. Akıllıca yaklaşımlar, tarayıcının iş yükünü önemli ölçüde azaltabilir."

Genişletmek için tıkla ...

• Döngü Sınırını Önbelleğe Alın: Özellikle geleneksel `for` döngülerinde, döngü koşulunda dizinin `.length` özelliğini her iterasyonda tekrar tekrar okumak yerine, bu değeri bir değişkende önbelleğe almak küçük ama birikimli bir performans artışı sağlayabilir.
• `for...of` Kullanımı: Modern JavaScript'te `for...of` döngüsü, özellikle diziler ve diğer yinelenebilir (iterable) nesneler için hem okunabilirlik hem de performans açısından çoğu durumda tercih edilebilir. `forEach`'e göre hafifçe daha hızlı olabilir çünkü ek bir fonksiyon çağrısı maliyeti taşımaz.
• `for...in` Kullanımından Kaçının: `for...in` döngüsü, bir nesnenin tüm numaralandırılabilir özelliklerini (prototip zincirindekiler dahil) yineler. Bu, beklenmedik özelliklerin işlenmesine ve performans düşüşüne yol açabilir. Nesne özelliklerini yinelemek için `Object.keys()`, `Object.values()`, `Object.entries()` veya `for...of` ile birlikte kullanmak daha güvenli ve hızlıdır.

// Kötü örnek: Her döngüde length hesaplama
const arr = Array(10000).fill(0);
for (let i = 0; i < arr.length; i++) {
  // işlem
}

// İyi örnek: length değerini önbelleğe alma
const arr2 = Array(10000).fill(0);
const len = arr2.length;
for (let i = 0; i < len; i++) {
  // işlem
}

// Modern ve genellikle hızlı: for...of
const arr3 = Array(10000).fill(0);
for (const item of arr3) {
  // işlem
}

• Debouncing: Bir olayın tetiklenmesini belirli bir süre bekletir ve bu süre içinde olay tekrar tetiklenirse sayacı sıfırlar. Olay yalnızca belirli bir süre boyunca tekrar tetiklenmediğinde işleyici çalıştırılır. Arama kutusu girişleri veya pencere yeniden boyutlandırma gibi durumlarda faydalıdır.
• Throttling: Bir olayın belirli bir zaman aralığında yalnızca bir kez çalışmasını sağlar. Örneğin, bir fare hareketi olayını saniyede en fazla 10 kez çalıştırmak istiyorsanız throttling kullanabilirsiniz. Scroll olayları veya oyunlardaki ateş etme mekanizmaları için idealdir.

// Basit bir debounce fonksiyonu
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

// Kullanım örneği
const handleSearch = debounce(searchTerm => {
  console.log('Arama yapılıyor:', searchTerm);
}, 500);

document.getElementById('searchInput').addEventListener('keyup', (e) => {
  handleSearch(e.target.value);
});

• Map ve Set Kullanımı: Eğer sıkça anahtar-değer çiftleri üzerinde arama, ekleme veya silme işlemleri yapıyorsanız, `Object` yerine `Map` kullanmayı düşünün. `Map`'ler daha iyi performans ve esneklik sunar (anahtarlar herhangi bir veri tipi olabilir). Tekil değerler listesi için ise `Set` kullanmak, dizi üzerinde `indexOf` veya `includes` ile manuel kontrol yapmaktan çok daha verimlidir.
• Algoritma Karmaşıklığı: Büyük veri setleri ile çalışırken, yazdığınız algoritmaların zaman ve alan karmaşıklığını (Big O gösterimi) göz önünde bulundurun. Örneğin, `O(n^2)` karmaşıklığa sahip iç içe döngülerden mümkün olduğunca kaçınmalı, bunun yerine `O(n log n)` veya `O` çözümler aramaya çalışmalısınız.

// Object yerine Map kullanımı
const userMap = new Map();
userMap.set('id_1', { name: 'Alice' });
userMap.set('id_2', { name: 'Bob' });

// Set kullanımı
const uniqueNumbers = new Set([1, 2, 3, 2, 1]); // {1, 2, 3}

• Kapsam Dışı Referanslar: Kapatmalar (closures) veya global değişkenler aracılığıyla, artık kullanılmayan nesnelere gereksiz referanslar tutmak hafıza sızıntılarına yol açabilir. Özellikle büyük DOM elemanları üzerinde olay işleyicileri tanımladığınızda ve bu elemanları DOM'dan kaldırdığınızda, olay işleyicisi referansını temizlemezseniz hafıza sızıntısı oluşur.
• Detached DOM Elemanları: Bir DOM elemanını görsel olarak kaldırsanız bile (örneğin `display: none` ile), eğer JavaScript kodunuzda bu elemana hala bir referans varsa, çöp toplayıcı onu bellekten atamaz. Elemanı tamamen kaldırmak ve referanslarını null'lamak önemlidir.
• Global Değişkenlerden Kaçının: Global değişkenler asla çöp toplayıcı tarafından toplanmazlar. Gereksiz global değişken kullanımından kaçınmak veya geçici olarak global kapsamda olması gereken değişkenleri işiniz bittikten sonra null olarak atamak iyi bir pratiktir.

"Gereksiz bellek kullanımı, uygulamanızın kaynaklarını boğar ve diğer işlemlerin verimli çalışmasını engeller."

Genişletmek için tıkla ...

• Tembel Yükleme: Bir kaynağın (resimler, videolar, bileşenler, modüller) yalnızca ihtiyaç duyulduğunda yüklenmesidir. Örneğin, bir web sayfasının altındaki resimleri kullanıcı kaydırana kadar yüklememek. JavaScript modülleri için dinamik `import()` kullanımı, bu yaklaşımın modern bir örneğidir.
• Kod Bölme: Uygulama kodunuzu daha küçük, yönetilebilir "chunk"lara (parçalara) bölmektir. Bu sayede kullanıcı, uygulamanın yalnızca ilk yüklemesi için gereken kodu indirir, diğer parçalar ise kullanıcı belirli bir bölüme gittiğinde veya belirli bir işlevi kullandığında talep üzerine yüklenir. Webpack, Rollup gibi modern paketleyiciler bu özelliği destekler.

// Dinamik import ile tembel yükleme örneği
const loadComponent = async () => {
  const { MyComponent } = await import('./MyComponent.js');
  // MyComponent'ı kullan
  new MyComponent().render();
};

document.getElementById('loadBtn').addEventListener('click', loadComponent);

• Arka Plan İşlemleri: Web Workers, JavaScript'in ana iş parçacığından bağımsız olarak arka planda kod çalıştırmanıza olanak tanır. Bu sayede, karmaşık matematiksel hesaplamalar, büyük veri setlerinin işlenmesi veya ağ istekleri gibi yoğun görevleri kullanıcı arayüzünü etkilemeden gerçekleştirebilirsiniz.
• Kullanım Kısıtlamaları: Web Workers doğrudan DOM'a veya ana iş parçacığının global objelerine (örneğin `window`, `document`) erişemez. İletişim, `postMessage()` ve `onmessage` olay işleyicileri aracılığıyla mesajlaşma tabanlıdır.

// worker.js
self.onmessage = function(e) {
  const result = e.data * 2; // Basit bir hesaplama
  self.postMessage(result);
};

// main.js
if (window.Worker) {
  const myWorker = new Worker('worker.js');
  myWorker.postMessage(10); // İşçiye mesaj gönder
  myWorker.onmessage = function(e) {
    console.log('İşçiden gelen sonuç:', e.data);
  };
}