Runtime Debugger - kannan M ambadi's blog : Performance

Improve ASPX web page performance by combining Skin & CSS

kannan.ambadi — Mon, 22 Jun 2009 02:57:00 GMT

There has been numerous discussions happened on web site performance, ranging from UI design to Site Hosting. Out of this, one of the important step is, to reduce the size of Http Response size. Optimizing Http Response will considerably reduce the page loading time at the browser. There are many ways to create optimized HTML markups to improve client-side performance. I would like to explain one such a way of designing web page. The Loading time factor will mainly depends on the web page size that is going to download at the client's browser. In order to achieve this as a web developer, you will have to work on the following things at least.

HTML -> Use XHTML markups with CSS always rather than using HTML tables with inline HTML style attributes unless it is required.
CSS -> Keep all your style definitions in an external stylesheet. It will make the page source clean and also reduce the Http Requests by caching these files at the client machine.

I don't want to discuss about JavaScript, since it might be deviating from the topic. As my title says, we can reduce the HTTP Response size by combining those two factors mentioned above with the help of Asp.Net Skin files.

As you know, Asp.Net 2.0 has introduced a new feature called Themes which helps to achieve consistent look and feel for websites. Themes may contain Skin files, CSS files, images etc. A Skin file is nothing but extensions of CSS definitions for the Asp.Net server controls. Themes and skins enables to handle style attributes from Application level to Control level. Skins are mainly used for Web controls such as Label, Button etc. There are two types of skin file, Default skin - which applies same style for all the controls of same type and Named Skin - which possess a SkinID property by which we can apply Style to the control's skinId. Here is an example for Skin file:

<asp:Button SkinID="buttonStyle" runat="server" BackColor="#2E132D" BorderColor="#507CD1" Height="25px" Width="120px"
BorderStyle='Solid' BorderWidth='1px' Font-Names='Verdana' Font-Size='11px' ForeColor='White' Font-Bold='true' />

The main disadvantage on Skin file is, it renders the pre-defined style definitions as inline HTML style attributes attached with the control to which skin is applied. Lets see the skin given above, it renders into the browser as follows

These chunks of HTML markups generates every time when the associated web control renders into the browser. Even though the ASPX part looks neat and clean, the HTML markups rendered at the browser may reminds the old Web 1.0 page(ie: html tags without CSS) and also results in large size of HTTP Response. Such pages will definitely affect the performance of the website. How can you avoid such scenario? Does it mean skin files are not good at website development? Will Css alone provide better performance? I would say no and definitely continue with skin files, but combined with CSS. In such case, we'll be writing most of the style definitions in CSS classes and link that class to skin by using a skin control property called CssClass. This time, the above skin style will look like as

<asp:Button SkinID="buttonStyle" runat="server" CssClass="normalButton" />

and it will render as

<input type='submit' class='normalButton' />

Did you see any difference? The chunks of HTML markups are gone!!!....The page size has reduced without removing skins, but by moving all style definitions into an external CSS file.

Technorati Tags: Asp.Net,HTML,CSS,Themes,Skins,HTTP Response,StyleSheet,Page Performance,Loading Time

Nullable types and ?? operator

kannan.ambadi — Fri, 06 Jun 2008 11:48:00 GMT

This time, i would like to discuss about a cool feature of C# 2.0. As you know, some database operations return null values and results into throwing exceptions unless you handled well in your business logic. .Net 2.0 has been solved by introducing nullable types. Lets discuss about its features and functionalities.
Nullable type can represent all the values of its underlying type, plus the value null. Thus, if you define a nullable boolean, its values comes from either true or false as well as Null.
For, nullable integer can be assigned from integer values and null. We can define a nullable type using its underlying datatype suffixed by a question mark symbol(?). Lets look at the examples

    Examples of nullable types
        //Nullable values must be assigned with an initial value.

        int? intNullable = 2;
        double? dblNullable = 37.73;
        bool? bNullable = true;

        Int[]? arNullable = new int?[1,2];

Keep in mind that nullable types are applicable only to value types or an array of value types.Referance types can't assinged to nullable types, since nullable types instances of System.Nullable(T) struct(here T is the type). If u define a nullable string, it would result into compile-time error!!!!..

Properties and Methods

Nullable type has a property called HasValue, which determines whether the value contains null or not. Nullable types are very useful where you are interacting with databases, especially columns with null or empty values. There is very useful method associated with the Nullable types, GetValueOrDefault() which returns the value of the variable or default value in case of null(for eg: false for bool, 0 for integer, 0.0 for double).

?? Operator

Lets assume, you are accessing a table which has some columns with empty(undefined) values or null values. But still you want to fetch the data since the whole data is very large and time-consuming. Instead of showing those null values, it could be possible to display some predefined values to end user, there by making the data more understanding and readable. This feature can be achieved by using "??" operator. It simply allows you to assign a value to nullable type if the retrieved value is in fact null. The following code-snippet makes this feature more clear.

//Suppose you are executing a database operation

//which returns a null value instead of integer

public Int GetMinimumCount()
{

int? iTemp = ConfigManager.GetMinimumCount() ?? 100;

return iTemp.Value;

}

Nullable types are very useful when we are following ORM architecture(eg: nHibernate), where we would be dealing table fields are class members, so that the chance of getting null values very high compared to 3-Tier architecture. I hope you would get an idea about nullable types and its features.

Exporting Dataset as CSV

kannan.ambadi — Tue, 25 Mar 2008 10:19:00 GMT

Hi Everyone,

Below given an easy way to export data from a dataset as CSV(comma seperated values) . At first, it converts the datatable to html table format and then writes data as output stream. We need to set the Content-Type of Response object as Excel format and add the filename to be streamed on the client browser in a dialog box

Check this snippet

private void ExportToCsvFromDataSet(DataSet dsExport) {

bool IsOutputStreamed = false;

try {

StringBuilder dataToExport = new StringBuilder();

foreach (DataTable dtExport in dsExport.Tables) {

string headerToExport= string.Empty;

foreach (DataColumn dCol in dtExport.Columns)

headerToExport = (char)34 + dCol.ColumnName + (char)34 + (char)44;

headerToExport.Remove(headerToExport.Length - 1, 1);

headerToExport = headerToExport + Environment.NewLine + Environment.NewLine;

dataToExport.Append(headerToExport);

string bodyToExport = string.Empty;

foreach (DataRow dRow in dtExport.Rows) {

foreach (object obj in dRow.ItemArray)

bodyToExport = bodyToExport + obj.ToString() + (char)44;

bodyToExport.Remove(bodyToExport.Length - 1, 1);

bodyToExport = bodyToExport + Environment.NewLine;

}

dataToExport.Append(bodyToExport);

dataToExport.Append(Environment.NewLine);

dataToExport.Append(Environment.NewLine);

if (string.IsNullOrEmpty(dataToExport.ToString())) {

Response.Clear();

Response.ContentType = "Text/vnd.ms-excel";

Response.AddHeader("Content-Disposition", "attachment;filename=report.csv");

Response.Write(dataToExport.ToString());

IsOutputStreamed = true;

}

}

}

catch { }

finally {

if (IsOutputStreamed)

Response.End();

}

}

Download the source code

Simple way to check your code performance

kannan.ambadi — Tue, 25 Mar 2008 08:15:00 GMT

Hi guys,Of course, we all know foreach loop takes more time than for loop and there are lot of similar scenarios in .Net. Even if it takes lot of time, we'll be forced to use foreach loop at some cases. So it'll be better, if we come to know the time taken for executing a piece of code at the runtime. Here is a simple way to find out the time taken for each process.It just writes the start time and finish time taken for the process in the debug window. Debug.Indent() method simply changes the indentation of the Output by one level and Debug.WriteLine() method writes a string in the debug window.

Here is the snippet

//Increases the current IndentLevel

System.Diagnostics.Debug.Indent();

//Writes the starttime

System.Diagnostics.Debug.WriteLine("DEBUG START TIME -> : " + DateTime.Now.ToString("HH:mm s:fff"));

//Execute the code

ConfigureControls();

//Writes the finish time

System.Diagnostics.Debug.WriteLine("DEBUG FINISH TIME -> : " + DateTime.Now.ToString("HH:mm s:fff"));

//Reduces the current IndentLevel

System.Diagnostics.Debug.Unindent();