0Pricing
jQuery Academy · Ders

DOM Değiştirme İşlemlerini İyileştirme

Daha iyi performans için öğeleri ayırma, DOM güncellemelerini parçalara bölme ve değişiklikleri toplu uygulama gibi DOM yeniden akışlarını ve yeniden boyamalarını en aza indiren teknikleri keşfedin.

DOM Değiştirme İşlemlerini İyileştirme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

DOM Neden Optimize Edilir?

Belge Nesne Modeli (DOM), tarayıcıların web sayfanızı temsil etme biçimidir. Sayfadaki öğeleri değiştirdiğinizde, örneğin yeni öğeler eklediğinizde veya stilleri güncellediğinizde, tarayıcının bu değişiklikleri görüntülemek için işlem yapması gerekir.

Sık veya optimize edilmemiş DOM işlemleri web sitenizi yavaşlatabilir ve kullanıcı deneyiminin ağırlaşmasına neden olabilir. Şimdi bunu nasıl hızlandıracağımızı öğrenelim!

Yeniden Akışlar ve Yeniden Çizimler

Bir öğenin düzenini veya stilini her değiştirdiğinizde tarayıcının bir "yeniden akış" (sayfanın bazı bölümlerinin düzenini yeniden hesaplama) ya da "yeniden çizim" (pikselleri yeniden çizme) gerçekleştirmesi gerekebilir.

  • Yeniden akış: Öğenin boyutu, konumu veya içeriği değiştiğinde gerçekleşir. Diğer öğeleri de etkilediği için maliyetlidir.
  • Yeniden çizim: Yalnızca öğenin görünürlüğü veya rengi değiştiğinde, düzeni değişmediğinde gerçekleşir. Yeniden akıştan daha az maliyetlidir.

Amacımız bu işlemleri en aza indirmektir.

Verimsiz DOM Güncellemeleri

Bir listeye çok sayıda öğeyi tek tek eklediğinizi düşünün. Özellikle stilleri veya boyutları değiştiriyorsanız her ekleme bir yeniden akışı ve yeniden çizimi tetikleyebilir.

Bu durum birkaç değişiklikte fark edilmeyebilir; ancak yüzlerce veya binlerce değişiklikte sayfanız çok yavaşlayabilir ve yanıt veremez hâle gelebilir.

Değişiklikleri Toplu Uygulama

DOM işlemlerini optimize etmenin en etkili yolu değişikliklerinizi "toplu" uygulamaktır. Canlı DOM üzerinde çok sayıda küçük ve tek tek değişiklik yapmak yerine tüm değişikliklerinizi aynı anda yapmaya çalışın.

Bunu duvar boyamaya benzetebilirsiniz: birçok küçük dokunuş yerine tek seferde büyük bir kat uygulamak daha iyidir.

Ayırma, Değiştirme, Yeniden Ekleme

Güçlü tekniklerden biri, bir öğeyi DOM'dan geçici olarak kaldırmak (ayırmak), "çevrimdışıyken" gerekli tüm değişiklikleri yapmak ve ardından DOM'a yeniden eklemektir.

jQuery'nin .detach() yöntemi bunun için idealdir. Öğeyi kaldırırken tüm verilerini ve olay işleyicilerini korur; .remove() ise bunların aksine korumaz.

Ayırma Uygulamada

Bu örnek, bir öğenin nasıl ayrılacağını, içeriğinin ve stilinin birden çok kez nasıl değiştirileceğini ve ardından yeniden nasıl ekleneceğini gösterir. Böylece yeniden akışlar, yeniden ekleme sırasında yalnızca bir kez gerçekleşecek şekilde en aza indirilir.

$(document).ready(function() {
  // Assume this HTML exists: <ul id="myList"><li>Item A</li><li>Item B</li></ul>
  const $list = $('#myList');
  const $firstItem = $list.find('li:first');

  // Detach the element
  const $tempItem = $firstItem.detach();

  // Make multiple changes while detached
  $tempItem.text('DETACHED & MODIFIED');
  $tempItem.css('background-color', 'yellow');

  // Re-attach it to the list
  $list.append($tempItem);
});

Güncellemeleri Parçalama

Çok sayıda yeni öğe eklerken bunları tek tek oluşturup doğrudan DOM'a eklemek verimsizdir. Bunun yerine önce tüm yeni öğeleri bellekte oluşturun, ardından hepsini tek seferde ekleyin.

Bunu bir HTML dizesi oluşturarak veya bir jQuery nesneleri dizisi meydana getirerek ve ardından tek bir .append() çağrısı kullanarak yapabilirsiniz.

Toplu Ekleme Örneği

Bu örnek, birden çok liste öğesinin nasıl oluşturulacağını ve bir HTML dizesi kullanılarak tek bir DOM işleminde nasıl ekleneceğini gösterir.

$(document).ready(function() {
  // Assume this HTML exists: <ul id="batchList"></ul>
  const $list = $('#batchList');
  let newItemsHtml = ''; // Build HTML string

  for (let i = 0; i < 5; i++) {
    newItemsHtml += `<li>New Item ${i + 1}</li>`;
  }

  // Append all new items at once
  $list.append(newItemsHtml);
});

'Düzen Sürekli Yenilenmesinden' Kaçının

DOM'u değiştirdikten hemen sonra düzen özelliklerini (örneğin .width(), .height(), .offset()) okurken dikkatli olun. Tarayıcının doğru ve güncel değeri sağlayabilmek için yeniden akış gerçekleştirmesi gerekebilir.

Bir döngüde sürekli olarak DOM'a yazıp ardından düzen özelliklerini okumaya "düzen sürekli yenilenmesi" denir ve bu, performansı ciddi şekilde düşürür. Okuma ve yazma işlemlerini gruplayın!

Kodunuzu Optimize Edin

Aşağıdaki tekniklerden hangileri jQuery'de DOM işlemlerinin performansını optimize etmede etkilidir?

Özet: Daha Hızlı DOM

Harika iş! DOM işlemlerini optimize etmek için temel stratejileri öğrendiniz:

  • Maliyetli yeniden akışları ve yeniden çizimleri anlayın.
  • Tek tek güncellemeler yapmak yerine değişiklikleri toplu uygulayın.
  • Öğeleri çevrimdışıyken değiştirmek için .detach() kullanın.
  • Çoğu zaman bir HTML dizesi oluşturarak birden çok öğeyi aynı anda ekleyin.
  • DOM okuma ve yazma işlemlerini gruplayarak "düzen sürekli yenilenmesinden" kaçının.

Bu teknikleri uygulamak jQuery uygulamalarınızı çok daha hızlı ve akıcı hâle getirecektir!

Sıkça Sorulan Sorular

“DOM Değiştirme İşlemlerini İyileştirme” dersi ücretsiz mi?

Evet — “DOM Değiştirme İşlemlerini İyileştirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“DOM Değiştirme İşlemlerini İyileştirme” dersinde ne öğreneceğim?

Daha iyi performans için öğeleri ayırma, DOM güncellemelerini parçalara bölme ve değişiklikleri toplu uygulama gibi DOM yeniden akışlarını ve yeniden boyamalarını en aza indiren teknikleri keşfedin. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.

“DOM Değiştirme İşlemlerini İyileştirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. DOM Değiştirme İşlemlerini İyileştirme
  2. Etkili Olay Yönetimi ve Hız Sınırlama
  3. Önbelleğe Alma ve Ertelenmiş Nesnelerden Yararlanma
← jQuery Academy Sayfasına Dön