Skip to main content

jQuery Seçici Belleğe Alma ve Önemi

Benim gibi bir çok yazılımcı JavaScript ve jQuery‘yi kendi çabalarımızla, yazılı ya da video online ders izleyerek öğrenmiştir. Malesef jQuery kodu yazarken seçicilerimizi (selector) belleğe (cache) alma konusunu belirten herhangi Türkçe ya da İngilizce bir ders (tutorial) görmedim. Dürüst olmak gerekirse çok nadiren, hatta neredeyse hiç Türkçe kaynak aramam ya da bakmam. Bunun başlıca sebebi genelde Türkçe kaynakların geç yazılmasıdır (İngilizce’den çevirilmesi ya da İngilizce olarak önce birinin öğrenmesini beklemek v.s.).

Bu makaleyi yazdığım gün başka bir yazılımcı tarafından yazılmış JavaScript dosyasında uyarı ve hataları düzenlerken jQuery seçicileri ve ön belleğe alma konusunda kısa bir makale yazmak aklıma geldi.

jQuery ile yazılmış JS dosyalarında, kodlarında en çok dikkatimi çeken $("div"), $("a.sinif") hatta $(this) gibi jQuery seçicilerinin on, click, bind, unbind gibi bir çok olayda (events) kullanıldığına şahit oluyorum.  Çoğu yazılımcının farketmediği durum ise $("#secici") gibi jQuery seçicilerini her kullandığımızda jQuery’e o seçiciye denk gelen elemanı / elemanları bulması için taratma yapmasını, jQuery nesnesi içine sarmasını, paketlemesini ve hafızada bu yeni nesneyi tutmasını istiyoruz. Dolayısıyla aynı seçiciyi birden fazla kullandığımızda jQuery’e tekrar tekrar aynı işlemi yaptırıyoruz ve işin en kötü tarafı ise zaten hafızada bulunan bir nesneyi tekrar tekrar oluşturtuyoruz.

Büyük, uzun jQuery kodlarınızdan dolayı tarayıcı kitleniyorsa bunun sebeplerinden biri tekrar tekrar kullanılan jQuery seçicileri olabilir. Bu gibi durumlarda kodunuzu düzenlerken ilk yapmanız gerekenlerden biri tekrar eden seçicileri ortadan kaldırmaktır.

Seçicileri Belleğe Alma

Küçük yazılımlarda seçicileri belleğe almak çokta zor bir durum değil;

Elbette tahmin edebileceğiniz gibi yazılımınız büyüdükçe bu tarz değişkenleri takip etmek oldukça zor olacaktır. Bu sorunu küçük bir fonksiyonla halledebiliriz;

Kullanımı ise oldukça basit cache.get("#secici") şeklinde kullanabilirsiniz. Özellikle uzun, büyük JS kodu içeren yazılımlarınızda kullandığınızda ne kadar büyük ölçüde daha az kaynak yediğini kendinizde rahatlıkla gözlemleyebilirsiniz.

Ilgıt Yıldırım

Alanında 16 yıldan fazla tecrübesi olan bir freelance / serbest web yazılımcısıyım. Son 8 yıldır e-ticaret siteleri ağırlıklı çalışmalar yapmaktayım. Web yazılımı konusunda PHP, MySQL, HTML, CSS ana ilgi alanlarımdır.

  • Murat Demirel

    her 2 yöntem için de önemli bir nokta, örneğin bir class ile seçiyoruz elemanı, bunu bir değişkene attık diyelim. sonrasında geri çağırdığımızda değişkene attığımız elemanlar gelir ama seçene kadar seçicimizin datası değişmişse yani mesela o classta bir eleman daha eklenmişse cache’den gelen elemanlar arasında yeni elemanımız olmayacaktır. dolayısıyla bunu sadece içeriği değişmeyecek seçiciler için kullanmak gerek. aksi taktirde DOM’a sonradan eklenen elemanlarımız üzerinde işlem yapamayız..

    • Seni doğru olarak anladıysam, jQuery selectorlarını belleğe aldığımızda, bu elemanlar üzerinde değişiklik yaparsak, yaptığımız değişikliği bellekten okutursak sonra yapılan değişiklikleri bellekten çekemeyiz diyorsan jQuery seçicileri (selector) bu şekilde çalışmıyor.

      Binlerce kelimeyle anlatamayacağını en iyi kod anlatırmış. Bir örnek hazırladım bir bak istersen; http://jsfiddle.net/ilgityildirim/dLu13e1e/

      • Murat Demirel

        içeriğinin değişmesi ya da DOMda elemanın yerinin fln değişmesi değil benim demek istediğim. sonradan eklenen elemanlar mesele.. en iyi kodla olacak sanırım gene..
        http://jsfiddle.net/DjMuratHan/Luo0o9b0/1/
        linkte 3 adet örnek var. iç içeler ama trace edebileceğini varsayıyorum. kısaca anlatmak istediğim şöyle:
        1. örnekte sadece 1 kere cache’den okuyup direk kullandım.
        2. örnekte eleman eklemeden önce ve sonra ayrı ayrı cache’den okuyup kullandım.
        3. örnekte ise direkt olarak jquery seçicisini kullandım.

        • Tamam, şimdi demek istediğini daha iyi anladım. Cache.get’e yeni bir metod daha ekleyip cache.refresh() tarzı birşey yapabiliriz.

          Bu arada tabii her elemanı cache almakta iyi bir yol değil. Karışıklığı önlemek için nerelerde kullanılması hakkında bir makale yazmak iyi olacak sanıyorum.

          Kusura bakma daha önce yoğunluktan dolayı cevaplayamadım.