ASP.NET AJAX 4: Kevesebb töltögetés

Az ASP.NET csapat nemrég elérhetővé tette a Microsoft AJAX Library Preview 6 változatát, amivel egy rakás olyan újdonság vált elérhetővé, amellyel végül sokkal kevesebb Javascriptet kell a weboldal látogatóira rátukmálnunk.

Daraboljuk fel

Az egyik legfájóbb probléma az ASP.NET AJAX 3.5 alkalmazásánál, hogy viszonylag sok és viszonylag nagy Javascript fájlok folynak le a kliensre és erre nem igazán tudunk hatással lenni. Hiába használtunk csak egy kis funkciót a nagy ASP.NET AJAXból vagy akár csak a Microsoft AJAX Libraryből, jött vele minden. A jó hír az, hogy az ASP.NET 4.0-tól (már a béta1-től) kezdve több kis Javascript fájl van, dokumentálták, hogy melyik mit tud és hogyan függnek egymástól:

Microsoft_AJAX_Library_refactored

Rakjuk össze

Persze aki foglalkozott már teljesítménynöveléssel rögtön a fejéhez kap, hogy így a kliensnek sok fájlt kell letölteni, az sok HTTP kérés, ami még akkor is lassú, ha mindegyik 304 (Not modified) üzenettel tér vissza. Korábban volt egy kezdeményezés az AJAX Control Toolkit fejlesztőitől egy ToolkitScriptManager osztály formájában, de ezt kevesen ismerték és még kevesebben használták. A jó hír az, hogy a beépített ScriptManager osztály is támogatja a script combiningot, csak annyi dolgunk van, hogy a <Scripts> gyermek elemeit körbevesszük egy <CompositeScript> elemmel. Ez már a 3.5 verzióban is működik, ha explicit módon adjuk meg a szkripteket és akkor is csak azokra a szkriptekre, amelyek használják a ScriptManagert. Kilógnak például a validátorok, akik előbb születtek, mint a ScriptManager. Szerencsére a 4.0 verzióban már ez is jól fog menni mind a ScriptResource.axd-vel, mind pedig a WebResource.axd-vel leküldött fájlokra.

Nyomjuk össze

Ha összerakunk jó sok szkriptet egybe, akkor ugyan csökken a HTTP kérések száma, de a letöltendő szkript mennyiség még nagy. Szerencsére a Preview 6-ban már van egy Microsoft AJAX Minifier, ami nem csak, hogy jobban tömörít, mint a JSMin, a Packer és a YUI Compressor, de ráadásul MSBuild taskként be is tudjuk építeni a build folyamatunkba. Erről majd írok nemsokára, mert nagyon egyszerűen megy, az egyetlen baja, hogy csak Javascriptet tud összenyomni, CSS-t nem😦

Töltsük máshonnan

Ha ideáig eljutottunk, akkor már csak azt töltik le a felhasználók, amire szükségük van, csakhogy azt minden egyes ASP.NET AJAXot használó webhelyről újra és újra megteszik. Ez nekik lassúság, a webhelyek gazdáinak pedig sávszélesség, amiért fizetniük kell. Szerencsére a Microsoft létrehozott egy Content Delivery Networkot (CDN) és erre a CDN-re felpakolta a Microsoft AJAX Library fájljait és a jQuery Library-t. Nekünk csak annyi dolgunk van, hogy a Microsoft FQDN-jét adjuk meg forrásként, az infrastruktúra pedig gondoskodik arról, hogy valóban a legközelebbi szerverről töltődjenek le a fájljaink. Ráadásul ha már egy Microsoft CDN-t használó webhelyet meglátogatott a felhasználó, akkor a szkriptek ott lesznek a böngészője gyorsítótárában és a következő MS CDN-t használó webhelynél már le sem kell tölteni ezeket.

Csak akkor, ha kell

A Preview 6-ban megjelent egy script loader komponens, ami lehetővé teszi, hogy egyrészt ne nekünk kelljen foglalkoznunk azzal, hogy a library egyes szkriptjei hogyan függnek egymástól, másrészt akkor és azt a részét töltsük le a library-nek a kliensre, amire éppen akkor és ott szükség van. Elég csak a script loaderre hivatkoznunk az oldal tetején:

  <script src="http://ajax.microsoft.com/ajax/beta/0910/Start.js" type="text/javascript"></script>

Kódban pedig elég megadnunk, hogy melyik komponensre van szükségünk. Ha például DataView-val akarunk adatot kötnünk, nem kell tudnunk, hogy melyik .js fájlban tanyázik, elég ennyi írnunk:

  Sys.require( Sys.components.dataView ); 

Amint letöltődött a szkript fájl, a rendszer meghívja az onReady eseménykezelőt, ahol már használhatjuk is a komponenst:

  Sys.onReady( function() 
{
Sys.create.dataView("#myDiv",
{
data:countries

});
});

Ütős lesz a következő .NET Framework, nem véletlenül lett 4.0 és nem 3.6🙂

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s