Introduction:

When we design and develop the website, the performance is in the core of development. The system you are developing must produce the result with high speed. For the web development perspective, website load performance is very essential thing to take care of. You need good working layout, easy layout and easy navigation.

Here with this article I m not going to talk about of all the aspects of web application performance improvements. But I am specifically targeting the topic when it comes to the CSS and JavaScript faster loading in the client browser. In fact Google is also counting the speed of your website site when indexing to your website.

The goal was to improve overall performance on the client side. At the same time, it will show how we can force a client side script to be coached at the browser, so that in subsequent visit, it will take those scripts from the cache. This becomes increasingly important when using AJAX techniques within an application that introduce new features and functionality.

First of all I will outline the requirements and essential steps that this project is made of. So that if you want to implement the same in your development, it become easy for you to set up project.

To download complete project, click here

Setup:

To begin with, we will have following list of files to be created in the development studio.

1. 2 XML files, first one to hold source of JS files for each page and second to hold CSS files for each page.
2. A generic class that implement IHttpHandler, that will be used to delivery combined and compressed JavaScript/CSS at the client.
3. And at last your .ASPX file that will be used to serve combined and compressed Javascript/CSS at client side.

Step by Step Implementation:

Now let’s get dig into the actual development. To summarize, let’s say we have a page default.aspx that has following no. of JavaScript files and CSS files. Think of these file that we wanted to combine them and deliver at one go at the client browser.

1. jquery.js
2. script-file-1.js
3. style-1.css
4. style-2.css

As you can see, we have 2 different JavaScript file & 2 CSS files. So what basically we will do in the next is to create a utility which can combine given JavaScript and compress it, then send it to client browser. Next the same process will be done for the CSS. Both the CSS files will be combined and compressed and send to client browser.

Now it’s time to take a look at into actual stuff that does this underlying work.

First of all we will create a CS class file that will hold the programming stuffs.

So perform the following steps to create & configure that CS class file.

1. Create CS class file with the name ScriptCombiner.cs and put the following code in that.

public class
ScriptCombiner : IHttpHandler{

private readonly static TimeSpan CACHE_DURATION = TimeSpan.FromDays(1);

private HttpContext context;

public void ProcessRequest(HttpContext context){

}

public bool IsReusable{

get { return true; }

}

}

As you can see, we are implementing the IHttpHandler interface.

You can write custom HTTP handlers to process specific, predefined types of HTTP requests in any Common Language Specification (CLS) compliant language. Executable code defined in the HttpHandler classes, rather than conventional ASP or ASP.NET Web pages, responds to these specific requests. HTTP handlers give you a means of interacting with the low-level request and response services of the IIS Web server and provide functionality much like ISAPI extensions but with a simpler programming model.

We are also implementing IsReusable properly as it is compulsory to implement as a part of inheritance of IHttpHandler interface.

Now, let’s put the nuts & bolts inside the ProcessRequest function. I will also explain you the step by step each execution that is inside this function.

1. We will also create another CS class file that is used to compress JavaScript. That file is named as “JavaScriptMinifier.cs”. Please take a look at the attached project solution file. As it is contain long lines of code, I can’t put it here.
2. Complete your class file with following functions.

public void ProcessRequest(HttpContext context)

{

string xStrType, xStrSet, xStrVer, xStrpagecode;

Boolean xBlnCanCompress;

this.context = context;

HttpRequest request = context.Request;

xStrType = (!String.IsNullOrEmpty(request["type"])) ? request["type"] : null;

xStrSet = (!String.IsNullOrEmpty(request["s"])) ? request["s"] : null;

xStrVer = (!String.IsNullOrEmpty(request["v"])) ? request["v"] : null;

xStrpagecode = (!String.IsNullOrEmpty(request["pcode"])) ? request["pcode"] : null;

//first check if client browser can support compressions

xBlnCanCompress = CanClientGZip(request);

using (MemoryStream memStream = new MemoryStream(8092))

{

Stream writer;

//if browser is supporing GZip compression then create a new object using ICSharpCode.SharpZipLib.GZip

//library which allow the compressed respose to send to client

if (xBlnCanCompress)

writer = (new ICSharpCode.SharpZipLib.GZip.GZipOutputStream(memStream));

else

writer = memStream;

using (writer){

//now its time to read all the script/css files into a StringBuilder object.

StringBuilder combinedSource = new StringBuilder();

foreach (string file in GetFileNames(xStrSet, xStrpagecode, xStrType))

combinedSource.Append(System.IO.File.ReadAllText(context.Server.MapPath(file), Encoding.UTF8));

//Upto now we have combined all css/javascript based on request.

//its now time to remove extra white spaces and other unwanted characters from respose.

//compression will take place now.

string minified;

//use the YUI Javascript/CSS minifier to compress all js files

if (xStrType == “js”)

minified = combinedSource.ToString();

else

minified = CompressCSS(combinedSource.ToString());

// Send minfied string to output stream

byte[] bt = Encoding.UTF8.GetBytes(minified);

writer.Write(bt, 0, bt.Length);

}

//cache the respose so that in next request it can be reused

byte[] responseBytes = memStream.ToArray();

//context.Cache.Insert(GetCacheKey(xStrSet, xStrType, xStrVer, xBlnCanCompress), responseBytes, null, System.Web.Caching.Cache.NoAbsoluteExpiration, CACHE_DURATION);

// Generate the response

this.WriteBytes(responseBytes, xBlnCanCompress, xStrType);

}

}

private bool CanClientGZip(HttpRequest request){

string acceptEncoding = request.Headers["Accept-Encoding"];

if (!string.IsNullOrEmpty(acceptEncoding) &&

(acceptEncoding.Contains(“gzip”) || acceptEncoding.Contains(“deflate”)))

return true;

return false;

}

// helper method that return an array of file names inside the text file stored in App_Data folder

private static string[] GetFileNames(string setName, string pagecode, string type)

{System.Xml.XPath.XPathDocument doc2;

System.Xml.XPath.XPathNavigator navigator;

System.Xml.XPath.XPathNodeIterator iterator;

System.Collections.Generic.List<string> scripts = new System.Collections.Generic.List<string>();

string key;

if (type == “js”)

key = “scriptfile”;

else

key = “cssfile”;

if (System.Web.HttpContext.Current.Cache[key] != null)

{doc2 = (System.Xml.XPath.XPathDocument)System.Web.HttpContext.Current.Cache[key];

}

else

{

string filename;

filename = System.Web.HttpContext.Current.Server.MapPath(String.Format(“~/App_Data/{0}.xml”, setName));

doc2 = new System.Xml.XPath.XPathDocument(filename);

System.Web.HttpContext.Current.Cache.Insert(key, doc2, new System.Web.Caching.CacheDependency(filename), DateTime.Now.AddMinutes(60), TimeSpan.Zero);

}

navigator = doc2.CreateNavigator();

if (type == “js”)

iterator = navigator.Select(“/scripts/page[@pagecode='" + pagecode + "']/script”);

else

iterator = navigator.Select(“/styles/page[@pagecode='" + pagecode + "']/style”);

while (iterator.MoveNext())

scripts.Add(iterator.Current.InnerXml);

return scripts.ToArray();

}

private string GetCacheKey(string type, string setName, string version, bool cancompress)

{

return “HttpCombiner.” + setName + “.” + type + “.” + version + “.” + cancompress;

}

private void WriteBytes(byte[] bytes, bool isCompressed, string type)

{

HttpResponse response = context.Response;

response.AppendHeader(“Content-Length”, bytes.Length.ToString());

if (type == “js”)

response.ContentType = “application/x-javascript”;

else

response.ContentType = “text/css”;

if (isCompressed)

response.AppendHeader(“Content-Encoding”, “gzip”);

else

response.AppendHeader(“Content-Encoding”, “utf-8″);

context.Response.Cache.SetCacheability(HttpCacheability.Public);

context.Response.Cache.SetExpires(DateTime.Now.Add(CACHE_DURATION));

context.Response.Cache.SetMaxAge(CACHE_DURATION);

response.ContentEncoding = Encoding.Unicode;

response.OutputStream.Write(bytes, 0, bytes.Length);

response.Flush();

}

public static
string GetScriptTag(string setname, string pageid, string type, string ver)

{

string result = “”;

if (type == “js”)

result += String.Format(“<script type=\”text/javascript\” src=\”/” + Web.Utility.Functions.GetURLPrefix() + “ScriptCombiner.axd?s={0}&v={1}&type=js&pcode={2}\”></script>”, setname, ver, pageid);

else

result += String.Format(“<link link href=\”ScriptCombiner.axd?s={0}&v={1}&type=css&pcode={2}\” rel=\”stylesheet\” type=\”text/css\”/>”, setname, ver, pageid);

return result;

}

public static string CompressCSS(string body)

{

body = Regex.Replace(body, “/\\*.+?\\*/”, “”, RegexOptions.Singleline);

body = body.Replace(” “, string.Empty);

body = body.Replace(Environment.NewLine + Environment.NewLine + Environment.NewLine, string.Empty);

body = body.Replace(Environment.NewLine + Environment.NewLine, Environment.NewLine);

body = body.Replace(Environment.NewLine, string.Empty);

body = body.Replace(“\\t”, string.Empty);

body = body.Replace(” {“, “{“);

body = body.Replace(” :”, “:”);

body = body.Replace(“: “, “:”);

body = body.Replace(“, “, “,”);

body = body.Replace(“; “, “;”);

body = body.Replace(“;}”, “}”);

body = Regex.Replace(body, “/\\*[^\\*]*\\*+([^/\\*]*\\*+)*/”, “$1″);

body = Regex.Replace(body, “(?<=[>])\\s{2,}(?=[<])|(?<=[>])\\s{2,}(?=&nbsp;)|(?<=&ndsp;)\\s{2,}(?=[<])”, string.Empty);

return body;

}

You are now almost done with 50% of work for your project.

Now let’s take a look at the few of important execution steps that are in this function.

First of all we are declaring four different string variables:

string xStrType, xStrSet, xStrVer, xStrpagecode;

They will be used to get the Querystring passed in to this handler. This is utilized later on the code.

Moving next, you will find these function call:

//first check if client browser can support compressions

xBlnCanCompress = CanClientGZip(request);

This is basically to check does client browser support GZip compression.

Gzip compression, otherwise known as content encoding, is a publicly defined way to compress textual content transferred from web servers to browsers. HTTP compression uses public domain compression algorithms, like gzip and compress, to compress XHTML, JavaScript, CSS, and other text files at the server. This standards-based method of delivering compressed content is built into HTTP 1.1, and most modern browsers that support HTTP 1.1 support ZLIB inflation of deflated documents. In other words, they can decompress compressed files automatically, which saves time and bandwidth.

In the next step it is preparing the stream object used to hold the response output. We will not take dipper look into that code. As I expect that the a beginning developer even must be able know about next few line of code. J

Let’s move to the line of code:

//now its time to read all the script/css files into a StringBuilder object.

StringBuilder combinedSource = new
StringBuilder();

foreach (string file in GetFileNames(xStrSet, xStrpagecode, xStrType))

combinedSource.Append(System.IO.File.ReadAllText(context.Server.MapPath(file), Encoding.UTF8));

As you can see in the foreach loop, it is calling to method GetFileNames, by passing 3 different parameters. Here this is also core and important part of this project. Let me outline you first what this function basically do. This function will read to the “script.xml” file that hold content of script file that we want to load. Please look inside the attached project solution to understand it better. The function will read xml file and return array of string object containing JavaScript files to read.

In the subsequent line of code, it iterate through each file name and read it. Each content of read file is placed inside a StringBuilder object.

Please take look at the code inside the GetFileNames function to understand what is actually happening inside it. It fetches the JavaScript/CSS based on the parameter passed. And return either the JavaScript file name array or CSS file name array.

So now we have a combined script/CSS with us. It’s a time to minify JavaScript/CSS now.

Following line of code will minify respective JavaScript/CSS based on type of client script requested.

//use the YUI Javascript/CSS minifier to compress all js files

if (xStrType == “js”)

{

JavaScriptMinifier minifier = new
JavaScriptMinifier();

minified = minifier.Minify(combinedSource.ToString());

}

else

{

minified = CompressCSS(combinedSource.ToString());

}

The JavaScriptMinifier has been created in the 2^nd step. Please refer to the attached solution project for more detail regarding this class file. I have adopted this class file from one of the article

You will also see function CompressCSS that is used to compress CSS file. The compressor of CSS file is done through just few regular expression. JavaScript compression has different algorithm.

After that it is calling to WriteBytes function that will prepare the combined & compressed JavaScript & CSS response and send it to the client.

Hurray… as part of implementation we are done.

Now it’s time to check that in action. You can run the project attached here with and check it In live action.

To download complete project, click here

Let’s compare the result of two different pages. The first one is with the compressed JavaScript & CSS. The second one is with the normal JavaScript & CSS. We will also see the difference in load time and size of content received.

Response time with compressed JavaScript & CSS.

Response time without compressed JavaScript & CSS.

As you can see from given statistics

With Combined & Compressed JavaScript and CSS ..

Total request: 3

Response size: 16.3 KB

Without Combined & Compressed JavaScript and CSS ..

Total request: 5

Response size: 96 KB

You can clearly see the difference between these two request.

To get more idea open and run the project yourself. That will give you better idea.

Hope you will find it very useful.

Happy coding…. J

NOTE :

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development, Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.

NOTE :

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development, Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.

Handler code: image-handler.ashx

<%@ WebHandler Language=”C#” Class=”image_handler” %>

using System;

using System.Web;

using System.IO;

using System.Data;

using System.Data.Sql;

using System.Data.SqlClient;

using System.Configuration;

public class image_handler : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

string xStrCon = System.Configuration.ConfigurationManager.ConnectionStrings["conStrImage"].ConnectionString;

SqlConnection xCon = new SqlConnection(xStrCon);

xCon.Open();

SqlCommand xCom = new SqlCommand(“select * from images where”, xCon);

SqlDataAdapter xAda = new SqlDataAdapter(xCom);

DataSet ds = new DataSet();

xAda.Fill(ds);

// Image processing starts

byte[] bytImage = ReadFile(context.Server.MapPath(“banner.JPG”));

xCom.CommandText = “insert into images values(2,’kensington’,@imagedata)”;

xCom.Parameters.Add(new SqlParameter(“@imagedata”, (object)bytImage));

xCon.Close();

//Display image from SQL server

byte[] imageData = (byte[])ds.Tables[0].Rows[0][2];

context.Response.Clear();

context.Response.ContentType = “image/JPEG”;

context.Response.OutputStream.Write(imageData, 0, imageData.Length);

}

byte[] ReadFile(string sPath)

{

//Initialize byte array with a null value initially.

byte[] data = null;

//Use FileInfo object to get file size.

FileInfo fInfo = new FileInfo(sPath);

long numBytes = fInfo.Length;

//Open FileStream to read file

FileStream fStream = new FileStream(sPath, FileMode.Open, FileAccess.Read);

//Use BinaryReader to read file stream into byte array.

BinaryReader br = new BinaryReader(fStream);

//When you use BinaryReader, you need to supply number of bytes to read from file.

//In this case we want to read entire file. So supplying total number of bytes.

data = br.ReadBytes((int)numBytes);

return data;

}

public bool IsReusable

{

get

{

return false;

}

}

}

NOTE :

If you are in need of any Web Development feel free to Inquire us . Dhanashree Inc. Expertise in Asp.net Development, Php Development, Website designing, Open Source customisation. Dhanashree Inc can be our offshore development company / outsourcing web development company, hire dedicated web programmers.

Above information is for knowledge sharing if you have problem / issue / suggestion please intimate us with details for proper and prompt action.

We are all familiar with AD rotator control asp.net provides to show rotating/random ads on every page refresh.

But I found a limitation of this control while I needed to develop functionality where AD banners get changed on every page refresh as well as each banners should have multiple links which navigates to diff. URLs ( multiple image mapping in each AD banners )

As this is not possible with AD rotator I have developed a custom asp.net control which provides all this flexibilities with all AD rotator features.

Basic Concept:

To make the control easy to use & understand we will be keeping the concept of defining Ads same like AD rotator control using XML file.

Control will read the Ad banners from the XML file and render all the details with multiple image mappings in the aspx page.

XML file structure:

First and foremost step is to finalize the XML file structure that to be used in custom control to render the ads on random bases.

XML file will look as given in below sample file.

bannes.xml

<?xml version=”1.0″ encoding=”utf-8″ ?>

<banbers>

<banner>

<ImageUrl>http://xyz.com/banner1.jpg</ImageUrl>

<AlternateText>Site1 Main</AlternateText>

<mappings>

<map>

<left>0</left>

<top>0</top>

<right>50</right>

<bottom>50</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

</mappings>

</banner>

<banner>

<ImageUrl>banners/5.jpg</ImageUrl>

<AlternateText>b5</AlternateText>

<mappings>

<map>

<left>10</left>

<top>10</top>

<right>10</right>

<bottom>10</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

<map>

<left>25</left>

<top>25</top>

<right>25</right>

<bottom>25</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

<map>

<left>10</left>

<top>10</top>

<right>10</right>

<bottom>10</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

<map>

<left>25</left>

<top>25</top>

<right>25</right>

<bottom>25</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

<map>

<left>10</left>

<top>10</top>

<right>10</right>

<bottom>10</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

<map>

<left>25</left>

<top>25</top>

<right>25</right>

<bottom>25</bottom>

<navigateUrl>google.com</navigateUrl>

</map>

</mappings>

</banner>

</banbers>

Inside main banners TAG there will be multiple banners TAG to be added for each AD banner,

Each banner TAG will have child nodes(attributes) as listed below:

1. Image URL – AD image URL to be specified here
2. Alternate text – alt attribute for image
3. Mappings – list of all mappings with relative left-right-top-Bottom attributes
   1. Left – left side relative axis
   2. Right – right side relative axis
   3. Top– Top relative axis
   4. Bottom– Bottom relative axis
   5. Navigate URL – URL to navigate

Developing Custom Control:

Now next step is to build a custom asp.net control which will read the above XML structure and renders the data accordingly on ASPX page.

C# code file will be as given below:

ad-banners.cs

this control will have 1 public property where the XML file path will be given called

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml;

namespace InfoquestLibrary.Controls

{

[DefaultProperty("Text")]

[ToolboxData("<{0}:banner runat=server />")]

public class banner : System.Web.UI.WebControls.WebControl

{

string _strImageURL, _strXMLpath;

[Bindable(true)]

[Category("Appearance")]

[DefaultValue("")]

[Localizable(true)]

public string ImageURL

{

get { return _strImageURL; }

set { _strImageURL = value; }

}

public string XMLpath

{

get { return _strXMLpath; }

set { _strXMLpath = value; }

}

public override void RenderBeginTag(HtmlTextWriter writer)

{

}

public override void RenderEndTag(HtmlTextWriter writer)

{

}

protected override void RenderContents(HtmlTextWriter output)

{

XmlDocument xDoc = new XmlDocument();

XmlNode xRandomNode;

bool useMapping = true;

int xIntRandomNumber;

Random r = new Random();

xDoc.Load(System.Web.HttpContext.Current.Server.MapPath(this.XMLpath));

xIntRandomNumber = r.Next(xDoc.ChildNodes[1].ChildNodes.Count);

xRandomNode = xDoc.ChildNodes[1].ChildNodes[xIntRandomNumber];

if (xRandomNode.ChildNodes[2].Equals(null))

{

useMapping = false;

}

else

{

if (xRandomNode.ChildNodes[2].ChildNodes.Count == 0)

useMapping = false;

}

if (xRandomNode.HasChildNodes)

{

this.ImageURL = xRandomNode.ChildNodes[0].InnerText;

}

output.AddAttribute(HtmlTextWriterAttribute.Src, this.ImageURL);

if (useMapping)

{

output.AddAttribute(HtmlTextWriterAttribute.Usemap, “#map” + this.ID);

}

output.AddAttribute(HtmlTextWriterAttribute.Border, “none”);

this.AddAttributesToRender(output);

output.RenderBeginTag(HtmlTextWriterTag.Img);

if (useMapping)

{

int xIntMaps, xIntCounter;

xIntMaps = xRandomNode.ChildNodes[2].ChildNodes.Count;

output.AddAttribute(HtmlTextWriterAttribute.Name, “map” + this.ID);

output.AddAttribute(HtmlTextWriterAttribute.Id, “map” + this.ID);

this.AddAttributesToRender(output);

output.RenderBeginTag(HtmlTextWriterTag.Map);

for (xIntCounter = 0; xIntCounter < xIntMaps; xIntCounter++)

{

XmlNode xMap = xRandomNode.ChildNodes[2].ChildNodes[xIntCounter];

if (xMap.HasChildNodes)

{

output.AddAttribute(HtmlTextWriterAttribute.Shape, “rect”);

output.AddAttribute(HtmlTextWriterAttribute.Coords, xMap.ChildNodes[0].InnerText + “,” + xMap.ChildNodes[1].InnerText + “,” + xMap.ChildNodes[2].InnerText + “,” + xMap.ChildNodes[3].InnerText);

output.AddAttribute(HtmlTextWriterAttribute.Href, xMap.ChildNodes[4].InnerText);

output.AddAttribute(HtmlTextWriterAttribute.Title, “”);

output.AddAttribute(HtmlTextWriterAttribute.Alt, “”);

output.RenderBeginTag(HtmlTextWriterTag.Area);

output.RenderEndTag();

}

}

output.RenderEndTag();

}

}

protected override void OnPreRender(EventArgs e)

{

}

}

}

Using customer control in ASPX page:

Now we are done with developing customer control with all the required functionality.

And control now ready for use.

Registering custom control

<%@ Register Assembly=”code_center_library” TagPrefix=”TCC” Namespace=”TCC.Controls” %>

Defining Custom control in ASPX page

<TCC:banner ID=”ads” runat=”server” XMLpath=”~/banner-mapping/bannes.xml” />