One more ASP.NET page optimization ...

I wrote two articles on this topic already. The first was that you can earn few bytes from renaming the "javascript:__doPostBack" to "__dp". Then I noticed that I have problems with this. The problem was that in some cases you need to have the "javascript:" prefix. So my first attempt to do some optimization is considered more unsuccessful than successful. Now I am going to propose another way. It is again based on removing / renaming / moving existing things in the page so they can be a bit more optimized. Let's suppose we have a GridView. We clicked on the "Auto Format" thing and we not only have a GridView, but we have a nice looking grid view. It's great, but it seems to be unefficient. It appears that the GridView will add a

style="" attribute for each row / cell (not quite sure about the exact rules). And it will generate repeating markup, increasing the size of the page and respectivelly - your bandwidth.

I did a small snipet to fix this (not the best solution again but should be kind of starting point).

Here is my code:

     protected override void Render(HtmlTextWriter writer)
     {
        System.IO.StringWriter stringWriter = new System.IO.StringWriter();
        HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);

        this.EnsureChildControls();
        base.Render(htmlWriter);
        string html = stringWriter.ToString();

        AnalyzeStyles(html);
        html = RepairStyles(html);

        writer.Write(html);
     }

     private void AnalyzeStyles(string html)
     {
        MatchCollection CSSMatch = Regex.Matches(html, "style=[\"].+?[\"]", RegexOptions.IgnoreCase);
        foreach (Match mCss in CSSMatch)
        {
           if (htDuplicates.ContainsKey(mCss.Value))
           {
             htDuplicates[mCss.Value] = Convert.ToInt32(htDuplicates[mCss.Value]) + 1;
           }
           else
           {
             htDuplicates.Add(mCss.Value, 0);
           }
        }
     }

     private string RepairStyles(string html)
     {
        int classID = 0;
        int pos;

        IDictionaryEnumerator iOccurences = htDuplicates.GetEnumerator();
        this.CSS += "";

        InformaticsWeb.Pages.Optimized master = (InformaticsWeb.Pages.Optimized)this.Master;
        
        pos = Regex.Match(html, "", RegexOptions.IgnoreCase | RegexOptions.Singleline).Index + "".Length;
        
        html = html.Insert(pos, CSS);
        return html;
     }

Please note : AnalyzeStyles adds each of the style="" found on the page (each unique). If it finds secound and third and so on - it increases a counter. The counter is not currently used, but may be later used to decide which of the styles should be converted to CSS classes.

So this code basically takes the page and moves all the style="" attributes in the head section as a CSS classes. I tested and my grid view seems as beautiful as before this code was applied.

Now, does it worth to add this logic?
Well I think you can achieve the same functionality by using Skin files. I am adding this more for reference.
I also did a small excel diagram to show you how much bytes are saved based on the count of the items in the GridView:




Please note that the htDupplicates is a Hashtable, declared as a global variable, so you will need to add it if you want to use this code.

Let me now explain the columns in the excel file shown above.
The “Columns” column displays how much columns does the GridView render. Typically the columns are rendered as a table cells and doesn’t contain any style=”” attributes (at least I couldn’t see any), so this is something you can’t affect. The thing that this optimization affects is the number of rows in your gridview. The more rows you have the more bytes you will get.
The second column displays the number of rows in the grid view.
The third column is the optimized size of the gridview (when the above technique is applied).
The “Size Original” column displays the size for unoptimized page (the same page!).
And the last column shows you the difference before and after.

You can see it in the diagram - for 20 items you have about 842 bytes difference. While for 80 you have about 3,512 (I don’t think there is a live site which displays 80 items at once in a grid view ;).