The Denny Depok

Sejak AJAX dan Web 2.0 jadi tren di Web Programming, ada beberapa bagian web yang sebenernya udah ada dari dulu jadi hal yang penting. Pertama tentu aja XML (loh bukannya X di ajax itu XML ?? - red), trus CSS, dan terakhir tentu aja InnerHTML.

Buat yang udah ngoding AJAX tapi belum maen-maen dengan 3 hal diatas, kasian deh kamu… Apa enaknya maen ajax tapi gak ngulik XML, CSS dan InnerHTML ??

XML dan CSS standar lah ya… termasuk juga teriakan-teriakan bete programmer web karena IE gak beres banget ngedraw CSSnya. Masa sih hack XML/CSS khusus untuk IE doang sedang browser laen pada sepakat !!! Maka dari itu, mulailah tinggalkan IE :D –> walau saya ngakuin IE 7 OK juga speednya, mungkin speednya mirip FireFox, tapi masih kalah sama opera. Kalo IE 6 kebawah, kelaut aja deh, uninstall trus delete permanen (bisa gak pake low level delete ? :D).

Disini saya mo ngebahas InnerHTML. Apaan tuh ? Sebenernya InnerHTML tuh fungsi DOM browser, jadi kita bisa ngubah-ngubah isi suatu div / span / layer on the fly, jadi tampilan bisa dinamik.

jadi contoh kita punya html kayak gini…

<div id="pesan">Pesan Awal</div>

nah setelah dapet response dari AJAX, kita mo ganti isi dari div diatas, cara yang paling gampang adalah dengan :

document.getElementById("pesan").innerHTML = ajaxResponse;

emang sih dari referensi yang ada, pemakaian innerHTML gak disarankan, kita disarankan menggunakan fungsi-fungsi DOM untuk ngubah isi suatu node, tapi kalo ngerubahnya ribet banget, misalnya jadi nambah kontrol baru (ini biasa terjadi di purefect desktop), pemakaian fungsi dom berlebihan banget, maksudnya programmernya udah resign duluan sebelum programnya selesai :D

Makanya dengan pemakaian innerHTML, penambahan node baru jadi super gampang dan feasible untuk diprogram.

Tapi tunggu dulu, disamping kemudahan innerHTML, ada sisi gelapnya. Yaitu kalau anda melakukan set nilai ke innerHTML, maka proses yang dilakukan oleh browser adalah sebagai berikut :

1. delete node yang ada
2. parsing HTML yang baru di set
3. gambar sesuai dengan html baru

yang perlu diperhatiin adalah langkah 1. Dengan sifatnya begitu, maka gak feasible kalo kita melakukan proses penambahan innerHTML seperti ini :

document.getElementById("pesan").innerHTML += newAddedHTML;

kalo misalnya innerHTML sebelumnya udah kompleks banget maka proses diatas akan memakan waktu, mungkin menimbulkan kesan browsernya hang –> inget semua browser cuma punya 1 thread untuk ngegambar HTML, jadi kalo ada yang mo buat browser multithread, saya terima kasih banget –> bisa jadi bahan skripsi nih !

Jadi gimana dong ? masa untuk yang udah kompleks kita harus kembali ke fungsi DOM sih. Ya gimana lagi, tapi saya punya tips dikit. Daripada semua pake fungsi DOM, saya membatasi redraw innerHTML. Caranya ?? gini kalo mo tau…

skenarionya, udah ada HTML yang kayak gini :

<div id="pesan">
<div id=”pesan1″>ini yang pertama</div>
</div>

trus kita mo rubah jadi kayak gini :

<div id="pesan">
<div id=”pesan1″>ini yang pertama</div>
<div id=”pesan2″>ini yang kedua</div>
</div>

nah tehniknya adalah sebagai berikut :

// javascript code nih

var node = document.createElement("div");
node.id = “pesan2″;

// set style seperlunya, contoh :
node.style.color = “#FF00FF”;
node.innerHTML = “ini yang kedua”;

document.getElementById("pesan").appendChild(node);

Jadi idenya adalah kita nambahin dulu kontainernya. Penambahan kontainer pake fungsi dom appendChild enggak menyebabkan redraw keseluruhan HTML. Nah setelah kontainernya ada, yang kita set innerHTMLnya adalah kontainernya, jadi yang redraw cuma isi kontainernya aja –> yang mana tentu aja masih kosong.

Kalo htmlnya cuma kayak diatas sih gak ngaruh, tapi kalo kamu mrogram aplikasi Web 2.0 yang kompleks kayak purefect, maka teknik diatas ngaruh banget.

Gitu deh tips dari saya. Kalo ada yang mo nanya-nya silakan aja, mo pos di komen ato langsung email ke denny(at)klorofil.org

August 16th, 2007 | Category: Uncategorized | Subscribe to comments | Leave a comment | Trackback URL