Använd korta ID på tunga sidor

I projektet jag jobbar i nu har vi en rätt tung sida: den är komplex till sin struktur, mycket nästlade kontroller och mycket databindning.

Eftersom vi när vi byggde sidan koncentrerade oss på funktionalitet framför att få den snabb blev vi nu, såklart, tvungna att optimera sidan.

Jag har precis påbörjat arbetet. En första sak jag gjorde var att byta ut alla ID:n. Från saker som RepeaterAllRooms och ContainerValidators till RR och CV.

ID:n "ärvs"

Ju högre upp en kontroll är i hierarkin desto viktigare är det att få ID:et kort, eftersom föräldrars ID används för att skapa en kontrolls unika ID. Så alla rader i kontrollen RepeaterAllRooms får ID i stil med RepeaterAllRooms_RoomRow1, RepeaterAllRooms_RoomRow2, etc. Dessutom ligger ju de i sin tur i en container som ligger i en container som ligger i en container som…

Längst ner i hierarkin har vi input-fält. Varje fält fick ID:n i stil med:
ctl00_ctl00_ContentPlaceHolder1_tabContentPlaceHolder_RateAllotmentEditView1_
RateAllotmentControl_MultiTemplatePeriods_I0_RepeaterRooms_I0_RepeatedColumns_
ctl01_ColumnData_colPercentage_txt

Eftersom det är ett input-fält får den dessutom lika långt Name:
ctl00$ctl00$ContentPlaceHolder1$tabContentPlaceHolder$RateAllotmentEditView1$
RateAllotmentControl$MultiTemplatePeriods$I0$RepeaterRooms$I0$RepeatedColumns$
ctl01$ColumnData$colPercentage$txt

Med 100 fält blir sedan snabbt rätt tung. Inte nog med det; ViewState blir tungt också eftersom ID:n används även där.

36% html-kod försvann

Före förändringen var HTML-koden för sidan på runt 338 kB. Efter kortare-ID-bytet var sidan nere i 216 kB. Rätt stor förändring utan särskilt mycket jobb! 

Nästa steg blir bl.a. att se över ViewState.

Förkorta, förkorta, förkorta

Så se till att använda korta ID:n. Kör du med MasterPages, byt ut ContentPlaceHolder1 mot t.ex. CPH eftersom ALLA kontroller under det kommer att innehålla strängen ContentPlaceHolder1. På vår sida gav bara det en minskning med 14 kB. Kontroller som i sin tur innehåller många andra kontroller, som t.ex. en databunden Repeater, är goda kandidater för förkortning.

Att förkorta ID måste man ju såklart väga mot att få läsbar kod.

 

Edit 2007-10-02 17:42
Givetvis ska man inte byt ut alla ID:n för alla kontroller, utan enbart såna som faktiskt påverkar slutresultatet nämnvärt, dvs. enbart de kontroller som gör att html-koden bli nämnvärt mindre. Övriga kontroller låter man vara.

 

Effekten på sidor som komprimeras är så klart mindre än okomprimerade sidor.