Weblabor

Az utóbbi időben lehetőségem volt egy elég összetett, "igazi" AJAX-os webalkalmazás kifejlesztésére. Az alkalmazás jelentős mennyiségű adat (akár 700 adatcsomag) letöltése után az adatok különböző szempontok szerinti szűrését, rendezését és csoportosítását teszi lehetővé. Az ezzel az alkalmazással kapcsolatos tapasztalatokról szeretnék megejteni két-három blogbejegyzést a jövőben, egyrészt megosztva a tapasztalatokat, másrészt pedig megvitatva a döntéseimet - hátha tudtok jobbat. Mindenekelőtt egy kicsit a buktatókról.

A buktatót úgy hívják, hogy Internet Explorer. Elkövettem azt a hibát, hogy a CSS+XHTML oldalkialakítás során már bevált sorrendet alkalmaztam, és az Explorert a fejlesztés végére hagytam. Míg egy CSS alapú oldalkialakításnál, ha Firefoxot használok a fejlesztés alatt, akkor az Internet Explorerre illesztés a végén a munkának az 5%-át jelenti (nem túl jelentős rész) -, addig az AJAX fejlesztés során összemérhető időt vehet el az optimalizálás, nem csak a munka nagysága, de az igazán jó eszközök hiánya miatt is.

Az alkalmazás egyik követelménye az volt, hogy elviselhető mértékben használja ki a gép processzorát. A program nagy része már elkészült, amikor kiderült, hogy az addig Firefoxban kiválóan működő programmal Internet Explorer alatt jelentős teljesítmény problémák vannak. Az adatok szerverről letöltése és előfeldolgozása 100%-ra vitte fel a processzorhasználatot, és ott is tartotta úgy, hogy közben a böngésző gyakorlatilag használhatatlanná vált. Be kellett látnom, hogy az Explorer JavaScriptje sok esetben jóval lassabb és processzor igényesebb, mint a Firefoxé.

Az alkalmazás logikája szerint az adatokat bizonyos szempontok szerint a letöltés közben rendezni kell, és folyamatosan megjeleníteni a legjobb 10 találatot. A rendezéshez egy saját egyszerű rendezési algoritmust írtam (talán sima buborékrendezés volt), ami párszáz elemű tömbnél IE alatt már elviselhetetlenül lassúnak bizonyult. A JavaScriptnek van viszont egy beépített rendezési lehetősége, ami elég jól paraméterezhető: megadható neki egy függvény, ami a rendezés során az összehasonlításokat végzi. Az erre való áttérés egy nagyságrendet gyorsított, de még így is lassú volt a rendezés egy adott adatmennyiség felett. A megoldást végül az jelentette, hogy mindig csak a legjobb 10 és az éppen letöltött adatok kerülnek rendezésre, a kalapban mindig csak a legjobb 10-et bennhagyva végül. Ezen kívül a rendezési függvényt is minimálisra kellett leszorítani, hiszen nagyon sokszor került meghívásra.

Az AJAX fejlesztés / webalkalmazás fejlesztés során az egyes számú tanulság számomra tehát az volt, hogy nagyobb adatmennyiségek használatakor oda kell rá figyelni, hogy mit és hogyan csinálunk, s a jó és hatékony működéshez bizony különböző trükköket is be kell vetni.