Pengantar
Sebagian besar HTML5 bertujuan memberikan dukungan browser asli untuk komponen dan teknik yang telah kami capai melalui pustaka JavaScript sejauh ini. Penggunaan fitur ini, jika tersedia, dapat memberikan pengalaman yang jauh lebih cepat bagi pengguna. Dalam tutorial ini, saya tidak akan merangkum riset performa terbaik yang pernah Anda lihat di situs Exceptional Performance Yahoo atau Page Speed docs dari Google dan situs Let's create the web better. Saya akan fokus pada bagaimana menempatkan HTML5 dan CSS3 untuk digunakan saat ini bisa membuat aplikasi web Anda lebih responsif.
Tips 1: Gunakan penyimpanan web sebagai ganti cookie
Meskipun cookie telah digunakan untuk melacak data pengguna unik selama bertahun-tahun, cookie tersebut memiliki kelemahan serius. Kelemahan terbesar adalah semua data cookie ditambahkan ke setiap header permintaan HTTP. Hal ini pada akhirnya dapat berdampak terukur pada waktu respons, terutama selama XHR. Jadi, praktik terbaiknya adalah mengurangi ukuran cookie. Di HTML5, kita dapat melakukan lebih baik dari itu: menggunakan sessionStorage dan localStorage sebagai pengganti cookie.
Kedua objek penyimpanan web ini dapat digunakan untuk mempertahankan data pengguna di sisi klien selama sesi atau tanpa batas. Data mereka juga tidak ditransfer ke server melalui setiap permintaan HTTP. Keduanya memiliki API yang akan membuat Anda senang menghapus cookie. Berikut adalah kedua API, yang menggunakan cookie sebagai penggantian.
// 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;
}
Tips 2: Gunakan Transisi CSS, bukan animasi JavaScript
Transisi CSS memberi Anda transisi visual yang menarik antara dua status. Sebagian besar properti gaya bisa ditransisikan, seperti memanipulasi bayangan teks, posisi, latar belakang, atau warna. Anda dapat menggunakan transisi ke status pemilih pseudo seperti :hover atau dari formulir HTML5, :invalid dan :valid (contoh dengan status validasi formulir). Namun, fungsi tersebut jauh lebih efektif dan dapat dipicu saat Anda menambahkan class apa pun ke elemen.
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; }
Dengan menambahkan tombol alih class totheleft dan totheright, Anda dapat memindahkan kotak. Bandingkan jumlah kode ini dengan jumlah kode pada library animasi JavaScript. Jelas, jumlah byte yang dikirim ke browser jauh lebih sedikit ketika menggunakan animasi berbasis CSS. Selain itu, dengan akselerasi level GPU, transisi visual ini akan berjalan mulus.
Kiat 3: Gunakan database sisi klien, bukan bolak-balik server
Database SQL Web dan IndexedDB memperkenalkan database ke sisi klien. Daripada pola umum memposting data ke server melalui XMLHttpRequest atau pengiriman formulir, Anda dapat memanfaatkan database sisi klien ini. Menurunkan permintaan HTTP adalah target utama dari semua engineer performa, jadi menggunakannya sebagai datastore dapat menyimpan banyak perjalanan melalui XHR atau postingan formulir kembali ke server. localStorage dan sessionStorage dapat digunakan dalam beberapa kasus, seperti mencatat progres pengiriman formulir, dan terlihat jauh lebih cepat daripada API database sisi klien.
Misalnya, jika Anda memiliki komponen {i>data grid<i} atau kotak masuk dengan ratusan pesan, menyimpan data secara lokal dalam database akan menyimpan perjalanan bolak-balik HTTP ketika pengguna ingin menelusuri, memfilter, atau mengurutkan. Daftar teman atau pelengkapan otomatis input teks dapat difilter pada setiap penekanan tombol, membuat pengalaman pengguna jauh lebih responsif.
Tips 4: Peningkatan JavaScript memberikan keunggulan performa yang cukup besar
Banyak metode tambahan telah ditambahkan ke protoype Array di JavaScript 1.6. Opsi tersebut kini tersedia di sebagian besar browser, kecuali IE. Contoh:
// 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');
});
Dalam sebagian besar kasus, penggunaan metode native ini akan menghasilkan kecepatan yang jauh lebih cepat daripada loop for biasa, seperti: for (var i = 0, len = arr.length; i < len; i++).
Penguraian JSON native (melalui JSON.parse()) menggantikan file json2.js yang telah lama kami sertakan. Native JSON jauh lebih cepat dan lebih aman daripada menggunakan skrip eksternal dan sudah ada di IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 dan Chrome.
String.trim native adalah contoh bagus lain yang tidak hanya lebih cepat daripada padanan JS longhand, tetapi juga berpotensi lebih benar. Tidak satu pun dari tambahan JavaScript ini yang secara teknis merupakan HTML5, tetapi mereka termasuk dalam lingkup teknologi yang akan tersedia baru-baru ini.
Tips 5: Gunakan manifes cache untuk situs live, bukan hanya aplikasi offline
Dua tahun yang lalu, Wordpress menggunakan Google Gears untuk menambahkan fitur yang disebut Wordpress Turbo. Pada dasarnya, mereka meng-cache banyak resource yang digunakan di panel admin secara lokal, sehingga mempercepat akses file ke resource tersebut. Kita dapat mereplikasi perilaku tersebut dengan applicationCache HTML5 dan cache.manifest.
Cache aplikasi memiliki sedikit keuntungan dibandingkan menyetel header Expires; karena Anda membuat file deklaratif yang menunjukkan resource statis yang dapat di-cache, browser dapat mengoptimalkannya secara signifikan, bahkan mungkin menyimpannya ke cache sebelum penggunaan Anda.
Pertimbangkan struktur dasar situs Anda sebagai template. Anda memiliki data yang mungkin berubah, tetapi HTML di sekitarnya biasanya tetap cukup konsisten. Dengan cache aplikasi, Anda dapat memperlakukan HTML sebagai serangkaian template murni, meng-cache markup melalui cache.manifest, dan kemudian mengirimkan JSON melalui kabel untuk memperbarui kontennya. Model ini sangat mirip dengan aplikasi berita asli iPhone atau Android.
Tips 6: Aktifkan akselerasi hardware untuk meningkatkan pengalaman visual
Di browser terkemuka, banyak operasi visual dapat memanfaatkan akselerasi tingkat GPU, yang dapat membuat operasi visual yang sangat dinamis jauh lebih lancar. Akselerasi hardware telah diumumkan untuk Firefox Minefield dan IE9 serta Safari menambahkan akselerasi tingkat hardware di versi 5. (Fitur ini hadir di Mobile Safari lebih awal.) Chromium baru saja menambahkan transformasi 3D dan akselerasi hardware untuk Windows. Dua platform lainnya akan segera hadir.
Akselerasi GPU berjalan dalam kondisi yang sangat terbatas, tetapi transformasi 3D dan opasitas animasi adalah cara yang paling umum menyebabkan tombol beralih. Cara yang agak trik tapi tidak mengganggu untuk mengaktifkannya adalah:
.hwaccel { -webkit-transform: translateZ(0); }
Namun, tidak ada jaminan. :) Dengan akselerasi hardware yang didukung dan diaktifkan, terjemahan, rotasi, penskalaan, dan opasitas animasi pasti akan lebih lancar dengan pengomposisian GPU. Lapisan ini akan bermanfaat karena ditangani langsung di GPU dan tidak memerlukan penggambaran ulang konten lapisan. Namun, properti apa pun yang memengaruhi tata letak halaman akan tetap relatif lambat.
Kiat 7: Untuk operasi yang menggunakan banyak CPU, Pekerja Web memberikan
Pekerja Web memiliki dua manfaat signifikan: 1) Mereka cepat. 2) Selagi mereka sibuk mengerjakan tugas Anda, browser akan tetap responsif. Lihat Slide Presentasi HTML5 untuk Pekerja yang sedang beraksi. Beberapa kemungkinan situasi yang memungkinkan Anda menggunakan Web Worker:
- Pemformatan teks dokumen yang panjang
- Penyorotan sintaks
- Pemrosesan gambar
- Sintesis gambar
- Memproses array besar
Tips 8: Atribut formulir dan jenis input HTML5
HTML5 memperkenalkan kumpulan jenis input baru, mengupgrade kumpulan text, password, dan file untuk menyertakan search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range dan color. Dukungan browser untuk browser ini bervariasi, dengan Opera yang paling banyak mengimplementasikannya pada saat ini. Dengan deteksi fitur, Anda dapat menentukan apakah browser memiliki dukungan native (dan akan menawarkan UI seperti pemilih tanggal atau pemilih warna) dan jika tidak, Anda dapat terus menggunakan widget JS untuk menyelesaikan tugas-tugas umum ini.
Selain jenis, beberapa fitur berguna telah ditambahkan ke kolom input normal. Input placeholder menawarkan teks default yang akan dihapus saat Anda mengkliknya dan autofocus akan memfokuskan tanda sisipan pada pemuatan halaman sehingga Anda dapat langsung berinteraksi dengan kolom tersebut. Validasi masukan adalah hal lain yang masuk dengan HTML5. Menambahkan atribut required berarti browser tidak akan mengizinkan pengiriman formulir sampai kolom tersebut diisi. Selain itu, atribut pattern memungkinkan Anda menentukan ekspresi reguler kustom untuk input yang akan diuji; dengan nilai yang tidak valid yang memblokir pengiriman formulir. Sintaksis deklaratif ini merupakan upgrade besar tidak hanya dalam keterbacaan sumber, tetapi juga pengurangan JavaScript yang signifikan yang diperlukan. Sekali lagi, Anda dapat menggunakan deteksi fitur untuk menyediakan solusi penggantian jika tidak ada dukungan native untuk ini.
Menggunakan widget native di sini berarti Anda tidak perlu mengirim javascript dan CSS berat yang diperlukan untuk mengambil widget tersebut, sehingga mempercepat pemuatan halaman dan kemungkinan meningkatkan responsivitas widget. Untuk mencoba beberapa peningkatan input ini, lihat presentasi Slide HTML5.
Tips 9: Gunakan efek CSS3, bukan meminta sprite gambar yang berat
CSS3 menghadirkan banyak kemungkinan gaya baru yang menggantikan penggunaan gambar untuk mewakili desain visual secara akurat. Mengganti gambar 2k dengan CSS 100 byte adalah kemenangan besar, belum lagi Anda telah menghapus permintaan HTTP lainnya. Beberapa properti yang harus Anda pahami adalah:
- Gradien linear dan radial
- Radius batas untuk sudut melengkung
- Box-shadow untuk drop shadow dan glow
- RGBA untuk opasitas alfa
- Transformasi untuk rotasi
- Mask CSS
Misalnya, Anda dapat membuat tombol yang sangat rapi melalui gradien dan mereplikasi banyak efek lainnya tanpa gambar. Dukungan browser untuk sebagian besar fitur ini sangat solid, dan Anda dapat menggunakan library seperti Modernizr untuk menangkap browser yang tidak mendukung fitur tersebut agar dapat menggunakan gambar dalam kasus penggantian.
Kiat 10: WebSocket untuk pengiriman yang lebih cepat dengan bandwidth lebih sedikit daripada XHR
WebSockets dirancang sebagai respons terhadap popularitas Comet yang makin populer. Memang ada keuntungan menggunakan WebSockets sekarang, bukan model Comet daripada model XHR.
WebSockets memiliki framing yang sangat ringan, sehingga bandwidth yang digunakan sering kali lebih ringan daripada XHR. Beberapa laporan menunjukkan pengurangan byte sebesar 35% yang dikirim melalui kabel. Selain itu, dalam volume yang lebih tinggi perbedaan performa dalam hal pengiriman pesan lebih jelas; XHR telah dicatat dalam pengujian ini dengan waktu gabungan 3.500% lebih lama daripada WebSockets. Terakhir, Ericcson Labs mempertimbangkan performa WebSockets dan mendapati bahwa waktu ping melalui HTTP 3-5 kali lebih besar daripada WebSockets karena persyaratan pemrosesan yang lebih substansial. Mereka menyimpulkan bahwa protokol WebSocket jelas lebih cocok untuk aplikasi realtime.
Referensi Tambahan
Untuk rekomendasi pengukuran dan performa, Anda harus menggunakan Kecepatan Halaman dan YSlow ekstensi Firefox. Selain itu, Speed Tracer untuk Chrome dan DynaTrace Ajax untuk IE memberikan tingkat logging analisis yang lebih mendetail.