Prestandatips #3: HttpCombiner

När man utvecklar en webbplats används ofta många javascriptfiler och css-filer. Det är enklare att jobba med webbplatsen om man delar upp stilmallar och skriptfiler i logiska delar. Dock påverkar det prestandan på webbplatsen när alla dessa filer ska läsas in. För att komma åt detta kan man använda sig av exempelvis HttpCombiner en httphandler i C# som i runtime sätter ihop alla definierade javascript och css-filer till en enda.

Problem kan dock uppstå med konstiga tecken, så kallade BOM marks, som smyger sig in i den resulterande koden. Problemet diskuteras på stackoverflow och en lösning finns i sista posten

CSStips #1: less.js

LESS är ett ”ramverk” för enklare hantering av CSS genom vilket man får tillgång till kraftfulla funktioner som förenklar skapandet av stilmallar. Less var för skrivet i Ruby och tidigare har det kommit en portning till .NET. Nu kommer även en portning till JavaScript som sägs vara 40 gånger snabbare en Ruby versionen kallad less.js.

Nettuts+ har en bra artikel som ger en introduktion till less.js

Prestandatips #2: Sprite Maps

Sprite maps är ett sätt att effektivisera hanteringen av grafik. Principen går ut på att man samlar alla grafiska objekt som gör upp designen på en webbplats i en enda bild. För att sedan visa de rätta grafiska objekten på sin plats använder css och ställer background-position tillsammans med höjd och bredd beroende på var i bilden det grafiska objektet finns.

Fördelen med denna teknik är att man minskar när de http-anrop som en webbläsare när den laddar in en sida och således snabbas inläsningen upp.

Det kan vara lite bökigt att sitta och mäta ut i en bild var de olika grafisk elementen hamnar. Turligt nog finns det bra verktyg för att skapa både bilderna och den css-kod som behövs. Website Performance har ett sådant verktyg.