HTML5 ile daha hızlı bir web uygulaması için en iyi uygulamalar

Paul Irish

Giriş

HTML5'in büyük bir kısmı, bugüne kadar JavaScript kitaplıkları aracılığı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ğitimde, Yahoo'nun Exceptional Performance (Mükemmel Performans) sitesinde veya Google'ın Sayfa Hızı dokümanlarında ve Let's make the web faster (Web'i daha hızlı hale getirelim) sitesinde gördüğünüz mükemmel performans araştırmasını özetleyeceğim. Bunun yerine, HTML5 ve CSS3'ü kullanmaya başlamanın web uygulamalarınızı daha duyarlı hale getirebileceğine odaklanacağım.

1. İpucu: Çerezler yerine web depolama alanını kullanın

Çerezler, benzersiz kullanıcı verilerini izlemek için yıllardır kullanılsa da ciddi dezavantajları vardır. En büyük kusur, çerez verilerinizin tümünün her HTTP istek başlığına eklenmesidir. Bu durum, özellikle XHR'ler sırasında yanıt süresini ölçülebilir şekilde etkileyebilir. Bu nedenle, en iyi uygulama çerez boyutunu azaltmaktır. HTML5'te daha iyisini yapabiliriz: Çerezler yerine sessionStorage ve localStorage kullanabiliriz.

Bu iki web depolama nesnesi, kullanıcı verilerini oturum boyunca veya süresiz olarak istemci tarafında tutmak için kullanılabilir. Verileri de her HTTP isteği üzerinden sunucuya aktarılmaz. Çerezlerden kurtulduğunuza sevinmenizi sağlayacak bir API'leri var. Yedek olarak çerezleri kullanan her iki API'yi de burada bulabilirsiniz.

// 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şleri 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 renk gibi çoğu stil özelliğinde geçiş yapılabilir. :hover gibi sözde seçici durumlarına veya HTML5 formlarından :invalid ve :valid'ye geçişler kullanabilirsiniz (form doğrulama durumları içeren örnek). 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ı ekleyerek kutuyu hareket ettirebilirsiniz. Bu kod miktarını bir JavaScript animasyon kitaplığınınkiyle karşılaştırın. CSS tabanlı animasyon kullanıldığında tarayıcıya gönderilen bayt sayısının çok daha az olduğu açıktır. Ayrıca, GPU düzeyinde hızlandırma sayesinde bu görsel geçişler mümkün olduğunca sorunsuz olur.

3. İpucu: Sunucu gidiş dönüşleri yerine istemci tarafı veritabanları kullanın

Web SQL Veritabanı ve IndexedDB, veritabanlarını istemci tarafına getirir. Verileri XMLHttpRequest veya form gönderme aracılığıyla sunucuya yayınlama gibi yaygın bir yöntem yerine bu istemci tarafı veritabanlarından yararlanabilirsiniz. HTTP isteklerinin azaltılması tüm performans mühendislerinin birincil hedefidir. Bu nedenle, bunları bir veri kümesi olarak kullanmak, XHR veya form gönderimleri aracılığıyla sunucuya yapılan birçok ziyaretten tasarruf sağlayabilir. localStorage ve sessionStorage, form gönderme ilerleme durumunu yakalama gibi bazı durumlarda kullanılabilir ve istemci tarafı veritabanı API'lerinden belirgin şekilde daha hızlı olduğu görülmüştür. Örneğin, veri ızgara bileşeniniz veya yüzlerce mesaj içeren bir gelen kutunuz varsa verileri yerel olarak bir veritabanında depolamak, kullanıcı arama, filtreleme veya sıralama yapmak istediğinde HTTP gidiş gelişlerinden tasarruf etmenizi sağlar. Arkadaş listesi veya metin girişi otomatik tamamlama özelliği, her tuş vuruşunda filtrelenebilir. Bu sayede çok daha duyarlı bir kullanıcı deneyimi elde edilebilir.

4. İpucu: JavaScript iyileştirmeleri önemli performans avantajları sağlar

JavaScript 1.6'da Array prototipine birçok ek yöntem eklendi. Bu özellikler, IE hariç çoğu tarayıcıda kullanılabilir. Ö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öntemleri kullanmak, for (var i = 0, len = arr.length; i &lt; len; i++) gibi tipik for döngülerinizden önemli ölçüde daha hızlı sonuçlar verir. Yerleşik JSON ayrıştırma (JSON.parse() aracılığıyla), bir süredir dahil etmeye alıştığımız json2.js dosyasının yerini alıyor. Yerleşik JSON, harici bir komut dosyası kullanmaktan çok daha hızlı ve güvenlidir. IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 ve Chrome'da zaten mevcuttur. Yerel String.trim, yalnızca uzun JS eşdeğerlerinden daha hızlı değil, aynı zamanda potansiyel olarak daha doğru olan başka bir iyi örnektir. Bu JavaScript eklemelerinin hiçbiri teknik olarak HTML5 değildir ancak yakın zamanda kullanıma sunulan teknolojiler kapsamındadır.

5. İpucu: Yalnızca çevrimdışı uygulamalar için değil, yayındaki siteler için de önbelleğe alınmış manifest kullanın

İki yıl önce WordPress, WordPress Turbo adlı bir özellik eklemek için Google Gears'ı kullandı. Yönetici panelinde kullanılan kaynakların çoğunu yerel olarak önbelleğe alarak dosyalara erişimi hızlandırdı. Bu davranışı HTML5'in applicationCache özelliği ve cache.manifest ile taklit edebiliriz. Uygulama önbelleği, Expires üstbilgilerini ayarlamaya kıyasla küçük bir avantaja sahiptir. Önbelleğe alınabilecek statik kaynakları belirten açıklayıcı bir dosya oluşturduğunuz için tarayıcılar bu dosyayı büyük ölçüde optimize edebilir, hatta kullanmadan önce önbelleğe alabilir. Sitenizin temel yapısını şablon olarak kullanabilirsiniz. Değişebilecek verileriniz var ancak bu verilerin etrafındaki HTML genellikle oldukça tutarlı kalır. Uygulama önbelleğiyle HTML'nizi bir dizi saf şablon olarak değerlendirebilir, işaretlemeyi cache.manifest aracılığıyla önbelleğe alabilir ve ardından içeriği güncellemek için JSON'u kablo üzerinden yayınlayabilirsiniz. Bu model, iPhone veya Android'e özgü bir haber uygulamasının işleyişine çok benzer.

6. İpucu: Görsel deneyimi iyileştirmek için donanım hızlandırmayı etkinleştirin

Birçok görsel işlem, lider tarayıcılarda GPU düzeyinde hızlandırmadan yararlanabilir. Bu da son derece dinamik görsel işlemleri çok daha sorunsuz hale getirebilir. Donanım hızlandırma, Firefox Minefield ve IE9 için duyuruldu. Safari ise 5. sürümünde donanım düzeyinde hızlandırma ekledi. (Mobil Safari'de çok daha önce kullanıma sunulmuştur.) Chromium, Windows için 3D dönüştürme ve donanım hızlandırma özelliğini yeni ekledi. Bu özellikler yakında diğer iki platformda da kullanıma sunulacak.

GPU hızlandırması yalnızca oldukça kısıtlı bir dizi koşulda devreye girer ancak 3D dönüştürme ve animasyonlu opaklık, anahtarı etkinleştirmenin en yaygın yolları arasındadır. Bu özelliği etkinleştirmenin biraz hile gerektiren ancak göze çarpmayan bir yolu şunlardır:

.hwaccel {  -webkit-transform: translateZ(0); }

Ancak garanti veremiyoruz. :) Donanım hızlandırma desteklendiğinde ve etkinleştirildiğinde, GPU kompozisyonu sayesinde animasyonlu çeviri, döndürme, ölçeklendirme ve opaklık kesinlikle daha sorunsuz olur. Bu tür veriler doğrudan GPU'da işleneceğinden katman içeriklerinin yeniden çizilmesi gerekmez. Ancak sayfanın düzenini etkileyen tüm mülkler nispeten yavaş olmaya devam eder.

7. İpucu: CPU kullanımı yüksek işlemler için Web İşleyiciler

Web çalışanlarının iki önemli avantajı vardır: 1) Hızlıdırlar. 2) Görevlerinizi tamamlarken tarayıcı duyarlılığını korur. Çalışanların iş başında olduğu HTML5 Slayt Sunumunu inceleyin. Web işçilerini kullanabileceğiniz bazı durumlar:

  • Uzun bir dokümanın metin biçimlendirmesi
  • Söz dizimi vurgulama
  • Görüntü işleme
  • Görüntü sentezi
  • Büyük dizileri işleme

8. İpucu: HTML5 form özellikleri ve giriş türleri

HTML5, yeni bir giriş türü grubu sunar. Bu grup, text, password ve file grubumuzu search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range ve color içerecek şekilde yükseltir. Bu özellikler için tarayıcı desteği değişiklik gösterir. Şu anda Opera en fazla özelliği uygulamaktadır. Özellik algılama özelliğiyle, tarayıcıda yerel desteğin olup olmadığını (ve tarih seçici veya renk seçici gibi bir kullanıcı arayüzü sunup sunmadığını) belirleyebilirsiniz. Destek yoksa bu yaygın görevleri tamamlamak için JS widget'larını kullanmaya devam edebilirsiniz. Türlere ek olarak, normal giriş alanlarımıza birkaç kullanışlı özellik eklendi. placeholder girişi, tıkladığınızda temizlenen varsayılan metin sunar ve autofocus, sayfa yüklendiğinde imleci o alana odaklar. Böylece, o alanla hemen etkileşime geçebilirsiniz. Giriş doğrulaması, HTML5 ile birlikte kullanıma sunulan bir diğer özelliktir. required özelliğini eklemek, tarayıcı bu alan doldurulana kadar formun gönderilmesine izin vermeyeceği anlamına gelir. Ayrıca pattern özelliği, girişin test edilmesi için özel bir normal ifade belirtmenize olanak tanır. Geçersiz değerler, form gönderimini engeller. Bu açık söz dizimi, yalnızca kaynak okunabilirliği açısından değil, gerekli JavaScript miktarını önemli ölçüde azaltması açısından da büyük bir yükseltmedir. Bu özellikler için yerel destek yoksa yedek çözüm sunmak üzere yine özellik algılamayı kullanabilirsiniz. Burada yerel widget'ları kullanmak, bu widget'ları çalıştırmak için gereken ağır JavaScript ve CSS'yi göndermeniz gerekmediği anlamına gelir. Bu da sayfa yükleme hızını artırır ve muhtemelen widget'ın yanıt vermesini iyileştirir. Bu giriş geliştirmelerinden bazılarını denemek için HTML5 Slayt sunumuna göz atın.

9. İpucu: Ağır resim sprite'leri istemek yerine CSS3 efektleri kullanın

CSS3, görsel tasarımı doğru şekilde temsil etmek için resim kullanmamızın yerini alan birçok yeni stil seçeneği sunar. 2.000 piksellik bir resmi 100 baytlık CSS ile değiştirmek büyük bir kazançtır. Ayrıca başka bir HTTP isteğini de kaldırmış olursunuz. Bilgi edinmeniz gereken özelliklerden bazıları şunlardır:

  • Doğrusal ve dairesel gradyanlar
  • Yuvarlatılmış köşeler için border-radius
  • Gölge ve parıltı için kutu gölgesi
  • Alfa opaklığı için RGBA
  • Döndürme dönüşümleri
  • CSS maskeleri

Örneğin, renk geçişleri kullanarak çok şık düğmeler oluşturabilir ve resim kullanmadan birçok başka efekti kopyalayabilirsiniz. Bunların çoğu için tarayıcı desteği çok sağlamdır ve resimleri yedek durumda kullanmak üzere ö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ı yayın için WebSocket'ler

WebSockets, Comet'in artan popülerliğine yanıt olarak tasarlanmıştır. XHR üzerinden Comet yerine WebSockets kullanmanın avantajları vardır.

WebSocket'lerin çerçevesi çok hafiftir ve bu nedenle kullandığı bant genişliği genellikle XHR'den daha azdır. Bazı raporlar, kablo üzerinden gönderilen baytların% 35 oranında azaldığını gösteriyor. Ayrıca, mesaj yayınlama söz konusu olduğunda performans farkı daha yüksek hacimlerde daha belirgindir. Bu testte XHR, WebSocket'ten% 3.500 daha uzun bir toplam süreyle kaydedildi. Son olarak, Ericcson Labs, WebSocket'lerin performansını değerlendirdi ve daha önemli işleme gereksinimleri nedeniyle HTTP üzerinden ping sürelerinin WebSocket'lere kıyasla 3-5 kat daha uzun olduğunu tespit etti. WebSocket protokolünün gerçek zamanlı uygulamalar için daha uygun olduğu sonucuna vardılar.

Ek Kaynaklar

Ölçüm ve performans önerileri için Page Speed ve YSlow Firefox uzantılarını kullanmanız gerekir. Ayrıca Chrome için Speed Tracer ve IE için DynaTrace Ajax, analiz günlük kaydını daha ayrıntılı bir düzeyde sağlar.