Näita sildipilve

Optimeeritud Javascript

Optimized Javascript

Kirjutas ,

Et Javascripti optimeeritult rakendada, ei saa üle ega ümber kahest protsessist: Reflow ja Redraw. Reflow esineb iga kord kui muudetakse Javascripti abil olemasolevat HTML-i. Selle kutsuvad esile ka Javascripti abil mõjutatavad stiililehe määrangud, mis muudavad elementide asetust. Redraw aga esineb näiteks siis, kui muudame nähtavaks elemendi, mis enne nähtav ei olnud. Selle käivitab olukord, mis ei nõua elementide paigutuste ümberkalkuleerimist. Kui muuta Javascripti abil elemendi tausta, nõuab see DOM-i Redraw-d.

Mõlemad on keerulised protsessid, mille täitmine võtab aega. Seepärast on oluline kirjutada skript nii, et neid toiminguid nõutakse DOM-ilt võimalikult vähe.

Tegin väikese katse. AJAX-i tehnoloogia rakendamisel tuleb ette palju DOM-i manipuleerimist. Enamasti soovitakse lisada või eemaldada elemente. Puhtas Javascriptis loendile elementide lisamine näeks välja selline:

var list = document.getElementById('list');

for(var i = 0; i < 1000; i++) {
	var item = document.createElement('li');
	item.innerHTML = 'list' + i;
	list.appendChild(item);
}

Kui testida eelneva koodi täimisele kuluvat aega Firebugiga, on tulemuseks 121ms. Selline tulemus siis Mozilla Firefoxis 3.6.9.

var list = document.getElementById('list');
var fragment = document.createDocumentFragment();

for(var i = 0; i < 1000; i++) {
	var item = document.createElement('li');
	item.innerHTML = 'list' + i;
	fragment.appendChild(item);
}
list.appendChild(fragment);

Eelneva koodi täitmine võttis aega aga 83ms. See on 42% vähem kui eelmise skripti puhul.

Aga mille poolest need kaks skripti erinevad? Esimeses koodis iga tsükliga lisatid DOM-i uus element, mis käivitas Redraw. Seda tehti 1000 korda järjest! Teise koodi puhul täidetid enne DOM-i manipuleerimist kõikide uute elementidega fragment ja 1000 elemendiga fragment lisati DOM-i. See käivitas Redraw vaid ühe korra. Võit 42%!

Loe täpsemalt