CSS, jQuery: Daha Üstün Performans

CSS ve jQuery performans ve optimizasyon konusunda kafaları yemiş biri olarak bu güzelim Pazar gününde hem kendim hem sizin için performans ve optimizasyonu araştırdım. (Tabi dün güneşin altında saatlerce dolaşıp amele yanığı olduktan sonra bugün bir yere çıkmayacağım kesindi)

Bu araştırmamdaki en büyük etken Burak’ın yazdığı kodların (CSS ve jQuery) üzerine onunla girdiğimiz tartışmaların sonucu doğru ve yanlış bildiğim şeyleri tekrar gözden geçirme isteği.

Not: Araştırmamın sonucunda ben haklı çıktım burası ayrı bir konu 😉 Ama doğru bildiğim bazı yanlışları da düzeltme fırsatı buldum.

Konuyu ayrı başlıklar altında inceleyeceğim. İlk önce CSS.

CSS

Bu sayfaları birçoğunuz biliyorsunuz zaten. Ama bilmediğiniz varsa iyi bir referans olur size çalışmalarınızda:

Yukarıda anlatılanlara göre daha efektif ve performanslı bir CSS için:

Kullanılmayan CSS’leri sil
Kullanılmayan her stili silmek indirme süresini azaltarak sayfanızın daha hızlı taranmaya başlamasına başlar.

Aynı zamanda tarayıcının CSS motoru varolan tüm CSS kurallarının sayfada kullanılıp kullanılmadığını kontrol eder. Kullanılanları sayfaya uygular. Ancak kullanılmayanlar için de bir işlem gücü ve zaman harcar.

Sayfaya eklenen, eklenmeyen tüm stilleri ve harcanan süreleri görmek için Webkit’in CSS Profiler’ı kullanılabilir.
Webkit CSS Profiler

Efektif ve performanslı CSS için aşağıdakileri yapma
Etiket isimini anahtar olarak kullanma
#footer h3 {...}

Bunun yerine aşağıdaki kullanılabilir.

#footer .title {...}
Genel seçicileri anahtar olarak kullanma
.hide-scrollbars * {...}

Bunun yerine aşağıdaki kullanılabilir.

#hide-scrollbars .item {...}
Torun seçicileri anahtar olarak kullanma
ul > li > a {...}

Bunun yerine aşağıdaki kullanılabilir.

#list .link
Fazladan niteleyiciler
.container#content div.container

jQuery

CSS’in aksine JS’de daha iyi performans için bazı alanları eklemek gerekiyor. Fazladan niteleyici ve seçiciye en yakın ID’li kapsayanı eklemek gibi.

Yukarıdaki kaynaklara göre bu kurallar daha efektif ve performanslı bir jQuery kodu yazmamıza olanak sağlar:

Gerektiğinde düz JavaScript kullanın.

Sonuçta jQuery de bir JS kütüphanesi ve içinde düz JS kodlarıyla çalışıyor. O yüzden jQuery kullanmadan çözülebilecek yerleri düz JS ile çözün.

Nesnelerinizi önbelleğe yazın
var header = $('#header');
Sınıflara etiket ismi ekleyin
$('a.button');
Seçicileri en yakın ID’le elemanın torunu olarak çağırın
$('#navigation a.button');
Seçicileri sağdan sola modeline göre yazın
$('a.contact-links .side-wrapper');

Bunun yerine aşağıdaki kullanılmalı.

$('.contact-links div.side-wrapper');
jQuery’nin chaining(zincir) özelliğini kullanın
$('li.menu-item').click(function() {alert('test click')}).css('display', 'block').fadeTo(2, 0.7);
Context yerine jQuery’nin .find() özelliğini kullanın
var panels = $('div.panel', $('#content'));

Bunun yerine aşağıdaki kullanılabilir.

var panels = $('#content').find('div.panel');
Kullanmadığınız kodları sayfaya yüklemeyin
JS kodlarınızı birden fazla dosyaya bölün. İhtiyacınız olan sayfalarda bu dosyaları ekleyin.

Google CDN kullanın
Daha iyi tarayıcı önbelleklemesi için Google CDN kullanın

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

Bunlar temel olarak işinize yarayacak kısımlar. Ayrıntılı bilgiler için bağlantılardaki adreslere bakabilirsiniz.

Performanslı ve efektif bir kod için sen ne önerirsin?

  • ok

    “Performanslı ve efektif bir kod için sen ne önerirsin?”
    – Çok çok gerekli değilse 32KB! (deflate,gzip) boyutunda kocaman bir javascript dosyasını kullanıcıya yükletmek, tarayıcıya yorumlatmak, … yerine Javascript kullanmak.
    (benim! diyen ninja bile koca kütüphanedeki fonksiyonların içinden taş çatlasın %40 %50 kadarını kullanıyor (bunlar da seçiciler) fakat üşengeçlik devreye girdiğinde savunma da basit: örnek bol, hazır eklenti çok, sorulara sorunlara fazlasıyla cevap ve destek var…)