ASP.NET- Using span tag instead of label for performance

In ASP.NET controls used in to the user controls are generate Client Id which unique for the control and If you have so many user controls hierarchy then you will have very long client id like ‘ctl00_CPH_ctl02_BM_userLogin_UserName’.It will increase the Kilo Bytes of html rendered in the browsers. Label control is the control which is used to display text and its render as span tag in the html render by the browser. So in such type of scenario if you have so many label controls then your html is going to increase very much. And overall it will decrease the your application performance.

In asp.net 4.0 we can manage the Client Id via different options i have already posted over here. But for asp.net 3.5 and lower version we have to write our own code for doing that there are two options either we have to create a our own custom control inherited from label which override the ClientID generated by system or we can use the span tag instead of label control because ultimately label control will be rendered as span tag in browser.

We having same scenario in the one of the project we are having so many label controls in one of the form in our page. So it is going to kill our application because rendered HTML will be heavy. So we have decided to use span tag. Now you guys are having questions that how we can manage span text from the server side we have used static string variables for to manage the text of span. Let’s create a simple example to understand how its works.

We have created a static string which will contain the text for the label. We are assigning text in page_load event of page or control then we have used that static string directly in html in between span tag which will have same style sheet as label control. Following is code for that.

protected static string UserName;

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
        //asssign text here for first time
        UserName = "User Name";
  }
}

Now in the html of user control or page you need to write span tax as follows.

<span class="label"><%=UserName%></span>

That’s it will render span tag in your browser with same look as label and there will not be any id generated for this span tag and ultimately your html rendered in browser will have less Kilo Bytes. We able to reduce 10 to 12 KB bytes of our page via this technique. Hope this will help you too..

Technorati Tags: Label,Performance,ASP.NET,C#.NET