Giriş
HTML5'in büyük kısmı, şimdiye kadar JavaScript kitaplıklarıyla elde ettiğimiz bileşenler ve teknikler için yerel tarayıcı desteği sunmayı amaçlamaktadır. Mevcut olduğunda bu özellikleri kullanmak kullanıcılarınıza çok daha hızlı bir deneyim sunabilir. Bu eğiticide, Yahoo'nun Olağanüstü Performans sitesinde veya Google'ın Sayfa Hızı belgelerinde ve Web'i daha hızlı hale getirelim sitelerinde gördüğünüz mükemmel performans araştırmasını özetlemeyeceğiz. Bunun yerine, bugün HTML5 ve CSS3 kullanarak web uygulamalarınızı nasıl daha duyarlı hale getirebileceğimize odaklanacağım.
1. İpucu: Çerezler yerine web depolama alanını kullanın
Çerezler yıllardır benzersiz kullanıcı verilerini izlemek için kullanılmış olsa da ciddi dezavantajları vardır. En büyük hata, çerez verilerinizin tümünün her HTTP istek başlığına eklenmesidir. Bunun, özellikle XHR'ler sırasında yanıt süresi üzerinde ölçülebilir bir etkisi olabilir. Bu yüzden en iyi uygulama çerez boyutunu küçültmektir. HTML5'te bundan daha iyisini yapabiliriz: Çerezler yerine sessionStorage ve localStorage kullanın.
Bu iki web depolama nesnesi, kullanıcı verilerini oturum süresince veya süresiz olarak istemci tarafında tutmak için kullanılabilir. Bunların verileri de her HTTP isteği aracılığıyla sunucuya aktarılmaz. Çerezlerden sizi de memnun edecek bir API'leri vardır. Aşağıda, yedek olarak çerezleri kullanan her iki API de bulunmaktadır.
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
' expires='+expires+'; path=/';
document.cookie = cookiestr;
}
2. İpucu: JavaScript animasyonu yerine CSS Geçişlerini kullanın
CSS Geçişleri, iki durum arasında çekici bir görsel geçiş sağlar. Metin gölgesi, konum, arka plan veya rengi değiştirme gibi çoğu stil özelliğinin geçişi yapılabilir. :hover gibi sözde seçici durumlarına veya HTML5 formlarından, :invalid ve :valid'den (form doğrulama durumları içeren örnek) geçişler kullanabilirsiniz. Ancak çok daha güçlüdürler ve bir öğeye herhangi bir sınıf eklediğinizde tetiklenebilirler.
div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }
totheleft ve totheright sınıflarını değiştirerek kutuyu hareket ettirebilirsiniz. Bu kod miktarını bir JavaScript animasyon kitaplığının miktarıyla karşılaştırın. Açıkçası, CSS tabanlı animasyon kullanılırken tarayıcıya gönderilen bayt sayısı çok daha azdır. Ayrıca, GPU seviyesi hızlandırması sayesinde bu görsel geçişler mümkün olduğunca akıcı olacaktır.
3. İpucu: Sunucu gidiş dönüşleri yerine istemci tarafı veritabanlarını kullanın
Web SQL Veritabanı ve IndexedDB, veritabanlarını istemci tarafına sunar. XMLHttpRequest veya form gönderme yoluyla sunucuya veri gönderme genel kalıbı yerine bu istemci tarafı veritabanlarından yararlanabilirsiniz. HTTP isteklerini azaltmak, tüm performans mühendislerinin birincil hedefidir. Bunları bir veri deposu olarak kullanmak, XHR veya form gönderileri aracılığıyla birçok seyahati sunucuya kaydedebilir. localStorage ve sessionStorage, bazı durumlarda (ör. form gönderme işleminin ilerlemesini yakalama) kullanılabilir ve istemci taraflı veritabanı API'lerine göre fark edilecek şekilde daha hızlıdır.
Örneğin, bir veri tablosu bileşeniniz veya yüzlerce ileti içeren bir gelen kutunuz varsa, verileri bir veritabanında yerel olarak depolamak, kullanıcı arama yapmak, filtrelemek veya sıralamak istediğinde size HTTP gidiş-dönüşlerini kaydeder. Her tuş vuruşunda arkadaş listesi veya metin girişi otomatik tamamlama seçeneği filtrelenerek çok daha hızlı bir kullanıcı deneyimi sunulabilir.
4. İpucu: JavaScript iyileştirmeleri önemli performans avantajları sağlar
JavaScript 1.6'da Dizi protoypesine birçok ek yöntem eklenmiştir. Bunlar IE hariç çoğu tarayıcıda kullanılmaktadır. Örneğin:
// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]
// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
var linksList = document.querySelector('#links');
var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
linksList.innerHTML += newLink;
});
// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
return number < 2;
});
// [1.618]
// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});
Çoğu durumda, bu yerel yöntemlerin kullanılması, for (var i = 0, len = arr.length; i < len; i++) gibi tipik döngünüzden çok daha yüksek hızlar sağlar.
Yerel JSON ayrıştırması (JSON.parse() üzerinden), bir süredir eklemeye alışkın olduğumuz json2.js dosyasının yerini alıyor. Native JSON, harici bir komut dosyası kullanmaktan çok daha hızlı ve güvenlidir ve zaten IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 ve Chrome uygulamalarında mevcuttur.
Yerel String.trim, yalnızca uzun JS eşdeğerlerinden daha hızlı olmakla kalmayıp, aynı zamanda potansiyel olarak daha doğru olma potansiyeline sahip bir başka örnektir. Bu JavaScript eklemelerinin hiçbiri teknik olarak HTML5 değildir, ancak yakın zamanda kullanıma sunulacak teknolojilerin çatısı altındadır.
5. İpucu: Önbellek manifestini yalnızca çevrimdışı uygulamalar için değil, yayındaki siteler için de kullanın
İki yıl önce Wordpress, Wordpress Turbo adlı bir özellik eklemek için Google Araçları'nı kullandı. Yönetici panelinde kullanılan kaynakların birçoğunu yerel olarak önbelleğe alarak bunlara dosya erişimini hızlandırdı. Bu davranışı, HTML5'in applicationCache ve cache.manifest öğeleri ile tekrarlayabiliriz.
Uygulama önbelleğinin, Expires başlıklarının ayarlanmasına göre küçük bir avantajı vardır. Önbelleğe alınabilecek statik kaynakları belirten bildirim temelli bir dosya oluşturduğunuz için tarayıcılar bunu büyük ölçüde optimize edebilir, hatta kullanımınızdan önce önbelleğe alabilir.
Sitenizin temel yapısını bir şablon olarak düşünün. Değişebilecek verileriniz vardır, ancak bu verilerin etrafındaki HTML'ler genellikle tutarlıdır. Uygulama önbelleğiyle HTML'nizi bir saf şablon dizisi olarak işleyebilir, işaretlemeyi cache.manifest aracılığıyla önbelleğe alabilir ve daha sonra, içeriği güncellemek için kabloyu JSON üzerinden iletebilirsiniz. Bu model iPhone veya Android yerel haber uygulamalarının özelliklerine çok benzer.
6. ipucu: Görsel deneyimi geliştirmek için donanım hızlandırmayı etkinleştirin
Önde gelen tarayıcılarda birçok görsel işlem, son derece dinamik görsel işlemleri çok daha sorunsuz hale getiren GPU düzeyinde hızlandırmadan yararlanabilir. Sürüm 5'te Firefox Minefield ile IE9 ve Safari'ye donanım düzeyinde hız ekleme özelliği için donanım hızlandırma özelliği duyurulmuştur. (Mobil Safari'de çok daha önce vardı.) Chromium kısa süre önce Windows için 3D dönüştürme işlemleri ve donanım hızlandırmayı ekledi. Diğer iki platform da yakında kullanıma sunulacaktır.
GPU hızlandırması yalnızca oldukça kısıtlı koşullar altında devreye girer, ancak 3D dönüşümleri ve animasyonlu opaklık, anahtarı açmanın en yaygın yollarıdır. Bu özelliği açmak için kullanımı kolay ancak göze batmayan bir yol:
.hwaccel { -webkit-transform: translateZ(0); }
Ancak hiçbir garantisi yok. :) Donanım hızlandırma destekli ve etkin durumdayken, GPU birleştirme özelliğiyle animasyonlu çeviri, döndürme, ölçeklendirme ve opaklık kesinlikle daha akıcı olacaktır. Bunlar, doğrudan GPU'da işlenme avantajına sahiptir ve katman içeriğinin yeniden çizilmesini gerektirmez. Ancak, sayfanın düzenini etkileyen herhangi bir mülk nispeten yavaş olacaktır.
7. İpucu: CPU ağır işlemlerde Web İşçileri
Web İşçilerinin iki önemli faydası vardır: 1) Hızlıdırlar. 2) Kullanıcılar görevlerinizi kaynaştırırken tarayıcı yanıt vermeye devam ediyor. Çalışanlar için HTML5 Slide Deck'in nasıl çalıştığını görün. Web Worker'ları kullanabileceğiniz bazı durumlar:
- Uzun bir dokümanın metin biçimlendirmesi
- Söz dizimi vurgulama
- Resim işleme
- Resim sentezi
- Büyük dizileri işleme
8. İpucu: HTML5 Form özellikleri ve giriş türleri
HTML5; text, password ve file setini search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range ve color içerecek şekilde yeni sürüme geçirerek yeni bir dizi giriş türü kullanıma sundu. Bunlar için tarayıcı desteği farklılık göstermekle birlikte, şu anda çoğu Opera uygulaması bulunmaktadır. Özellik algılama sayesinde tarayıcının yerel destek sağlayıp sağlamadığını (ve tarih seçici ya da renk seçici gibi bir kullanıcı arayüzü sunup sunmayacağını) belirleyebilirsiniz. Desteklenmiyorsa bu yaygın görevleri gerçekleştirmek için JS widget'larını kullanmaya devam edebilirsiniz.
Türlere ek olarak, normal giriş alanlarımıza birkaç kullanışlı özellik eklenmiştir. placeholder girdisi, üzerini tıkladığınızda temizlenen varsayılan metin sunar ve autofocus, imleci sayfa yüklemeye odaklar. Böylece bu alanla hemen etkileşime geçebilirsiniz. Giriş doğrulaması, HTML5'te öne çıkan bir başka unsurdur. required özelliği eklendiğinde tarayıcı, bu alan doldurulana kadar formun gönderilmesine izin vermez. Ayrıca pattern özelliği, giriş için test edilecek özel bir normal ifade belirtmenize olanak tanır. Geçersiz değerler form gönderilmesini engeller. Bu bildirim temelli söz dizimi, yalnızca kaynak okunabilirliği açısından büyük bir güncelleme yapmakla kalmaz, aynı zamanda JavaScript'in kullanımını da önemli ölçüde azaltır. Benzer şekilde, bunlar için yerel destek yoksa bir yedek çözüm sunmak üzere özellik algılamayı kullanabilirsiniz.
Burada yerel widget'ların kullanılması, bu widget'ları çekmek için gerekli olan ağır JavaScript ve css'leri göndermenize gerek olmadığı anlamına gelir. Böylece sayfa yüklenmeyi hızlandırabilir ve widget duyarlılığını iyileştirebilirsiniz. Bu giriş geliştirmelerinden bazılarını denemek için HTML5 Slayt kümesine göz atın.
9. İpucu: Büyük sprite görseller istemek yerine CSS3 efektlerini kullanın
CSS3, görsel tasarımı doğru bir şekilde temsil etmek için resim kullanımımızın yerini alan birçok yeni stil oluşturma olanağı sunuyor. 2.000 boyutlu bir resmi 100 baytlık CSS ile değiştirmek büyük bir kazançtır. Bununla birlikte, başka bir HTTP isteğini de kaldırmış olursunuz. Bilgi edinmeniz gereken özelliklerden bazıları şunlardır:
- Doğrusal ve dairesel renk geçişleri
- Yuvarlatılmış köşeler için kenarlık yarıçapı
- Gölge ve parlama için kutu gölge
- Alfa opaklık için RGBA
- Döndürme dönüşümleri
- CSS maskeleri
Örneğin, gradyanlarla çok gösterişli düğmeler oluşturabilir ve sansasyon görüntülerindeki diğer birçok efekti çoğaltabilirsiniz. Bunların çoğu için tarayıcı desteği son derece sağlamdır. Resimleri yedek örnekte kullanmak amacıyla, bu özellikleri desteklemeyen tarayıcıları yakalamak için Modernizr gibi bir kitaplık kullanabilirsiniz.
10. İpucu: XHR'den daha az bant genişliğiyle daha hızlı dağıtım için WebSockets
WebSockets, Comet'in artan popülerliğine yanıt olarak tasarlanmıştır. Comet XHR modeli yerine şu anda WebSocket'leri kullanmanın gerçekten avantajları var.
WebSockets çok hafif bir çerçevelemeye sahiptir ve bu nedenle kullandığı bant genişliği genellikle XHR'den daha hafiftir. Bazı raporlar kablo üzerinden gönderilen baytlarda% 35'lik bir azalma olduğunu göstermektedir. Buna ek olarak, yüksek hacimlerde mesaj teslimi söz konusu olduğunda performans farkı daha belirgindir. XHR, bu testte WebSockets'ten% 3.500 daha uzun bir toplam süre ile kaydedilmiştir. Son olarak, Ericcson Labs, WebSocket'lerin performansını değerlendirdi ve daha önemli işleme gereksinimleri nedeniyle HTTP üzerinden ping sürelerinin WebSockets üzerinden 3-5 kat daha yüksek olduğunu tespit etti. WebSocket protokolünün gerçek zamanlı uygulamalar için açıkça daha uygun olduğu sonucuna vardılar.
Ek Kaynaklar
Ölçüm ve performans önerileri için kesinlikle Page Speed ve YSlow Firefox uzantılarını kullanmalısınız. Ek olarak, Chrome için Speed Tracer ve IE için DynaTrace Ajax analizin daha ayrıntılı bir düzeyde günlük kaydı olmasını sağlar.