In my recent experience I have faced some performance issues one of them is web application becomes very much slow. To identify this problem I have searched over the net and I have found a lots of topics.
Now I want to share some of the topics with you in summarized way:
1.Minimize HTTP Requests
2.Use a Content Delivery Network
3.Add an Expires or a Cache-Control Header
4.Gzip Components
5.Put Stylesheets at the Top
6.Put Scripts at the Bottom
7.Avoid CSS Expressions
8.Make JavaScript and CSS External
9.Reduce DNS Lookups
10.Minify JavaScript and CSS
11.Avoid Redirects
12.Remove Duplicate Scripts
13.Configure ETags
14.Make Ajax Cacheable
15.Flush the Buffer Early
16.Use GET for AJAX Requests
17.Post-load Components
18.Preload Components
19.Reduce the Number of DOM Elements
20.Split Components Across Domains
21.Minimize the Number of iframes
22.No 404s
23.Reduce Cookie Size
24.Use Cookie-free Domains for Components
25.Minimize DOM Access
26.Develop Smart Event Handlers
27.Choose over @import
28.Avoid Filters
29.Optimize Images
30.Optimize CSS Sprites
31.Don't Scale Images in HTML
32.Make favicon.ico Small and Cacheable
33.Keep Components under 25K
34.Pack Components into a Multipart Document
35.Enable HTTP Keep-Alives
36.Adjust Connection Timeouts
37.Enable HTTP Compression
Monday, February 15, 2010
Wednesday, February 10, 2010
Dynamically add control in asp.net
Recently I have faced a problem when try to dynamically add controls in asp.net, like this,
In test.aspx page
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" > </asp:PlaceHolder>
</div>
</form>
</body>
In test.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
this.PlaceHolder1.Controls.Add(btn);
}
Problem:
It is working fine but when I press any button I mean any post back occur It disappears.
After search for a long time I got the proper solution, now I would like to share this with you.
Solution:
To avoid this problem one should dynamically load the controls during Page_Init because we may want to hook up our events with proper handler at an early stage.
protected void Page_Init(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
btn.Click+=new EventHandler(btn_Click);
this.PlaceHolder1.Controls.Add(btn);
}
Some Tips:
In addition I have got more tips on it,
Control's Lify cycle:
1.Initialization
2.Load view state
3.Process postback data
4.Load
5.Send postback change notifications
6.Handle postback events
7.Prerender
8.Save state
9.Render
10.Dispose
11.Unload
You will get details from here:http://msdn.microsoft.com/en-us/library/aa719775%28VS.71%29.aspx
1.During Page_Init you cannot assign dynamic control property,because in Page_Init event Initialization happens before loadViewState in control's life cycle.The value assigned to the properties during Initialization will simply get overwritten by the ViewState values.
2.If you are expecting your ViewState to retain after the postback, always assign same ID to the dynamic control,if you use like this,
protected void Page_Init(object sender, EventArgs e)
{
TextBox t = new TextBox();
t.ID = Guid.NewGuid().ToString();
this.form1.Controls.Add(t);
}
It will not work. You should use same id or fixed id ,
like this, t.ID="txtName";
Original info:
http://geekswithblogs.net/shahed/archive/2008/06/26/123391.aspx
In test.aspx page
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server" > </asp:PlaceHolder>
</div>
</form>
</body>
In test.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
this.PlaceHolder1.Controls.Add(btn);
}
Problem:
It is working fine but when I press any button I mean any post back occur It disappears.
After search for a long time I got the proper solution, now I would like to share this with you.
Solution:
To avoid this problem one should dynamically load the controls during Page_Init because we may want to hook up our events with proper handler at an early stage.
protected void Page_Init(object sender, EventArgs e)
{
Button btn = new Button();
btn.ID = "btnSave";
btn.Click+=new EventHandler(btn_Click);
this.PlaceHolder1.Controls.Add(btn);
}
Some Tips:
In addition I have got more tips on it,
Control's Lify cycle:
1.Initialization
2.Load view state
3.Process postback data
4.Load
5.Send postback change notifications
6.Handle postback events
7.Prerender
8.Save state
9.Render
10.Dispose
11.Unload
You will get details from here:http://msdn.microsoft.com/en-us/library/aa719775%28VS.71%29.aspx
1.During Page_Init you cannot assign dynamic control property,because in Page_Init event Initialization happens before loadViewState in control's life cycle.The value assigned to the properties during Initialization will simply get overwritten by the ViewState values.
2.If you are expecting your ViewState to retain after the postback, always assign same ID to the dynamic control,if you use like this,
protected void Page_Init(object sender, EventArgs e)
{
TextBox t = new TextBox();
t.ID = Guid.NewGuid().ToString();
this.form1.Controls.Add(t);
}
It will not work. You should use same id or fixed id ,
like this, t.ID="txtName";
Original info:
http://geekswithblogs.net/shahed/archive/2008/06/26/123391.aspx
Tuesday, February 9, 2010
Use Master page <body> tag in Content page of asp.net
How to use the <body> onclick from content page in asp.net?
Master page is introducing from asp.net 2.0, this is the main layout page for whole application content page just inherit it.
So that,we get the <body> tag only in Master page,in content page there is no body tag. But I need to use this body tag from content page.
After search it I found a solution in asp.net forum. Original link: http://forums.asp.net/t/1062445.aspx
Sample:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" Title="Test Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function ClearBox()
{
var divBoxID=document.getElementById('BoxDiv');
divBoxID.style.display='none';
}
document.body.onclick= ClearBox;
</script>
For more info pls visit:
http://msdn.microsoft.com/en-us/library/7a9d6h4f.aspx
http://forums.asp.net/t/1225951.aspx
Master page is introducing from asp.net 2.0, this is the main layout page for whole application content page just inherit it.
So that,we get the <body> tag only in Master page,in content page there is no body tag. But I need to use this body tag from content page.
After search it I found a solution in asp.net forum. Original link: http://forums.asp.net/t/1062445.aspx
Sample:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" Title="Test Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function ClearBox()
{
var divBoxID=document.getElementById('BoxDiv');
divBoxID.style.display='none';
}
document.body.onclick= ClearBox;
</script>
<input id="Button1" type="button" value="button" />
</asp:Content>
For more info pls visit:
http://msdn.microsoft.com/en-us/library/7a9d6h4f.aspx
http://forums.asp.net/t/1225951.aspx
Converting Single-File Web Forms Pages to Code-Behind Pages
Sometimes I face some problem with single web form(only aspx page no code behind page) page. I am used to work in code-behind page,so that I try to solve this problem in may way but at last I found the solution in msdn. So I want to share this portion of the article with you:
It might be that the only thing you want to do with a single-file Web Forms page in Visual Studio is to convert it to a code-behind Web Forms page. Using Visual Studio to convert a single-file page to a code-behind page automatically accomplishes the following:
1. Generates a code-behind class file for the page.
2. Adds the appropriate page directives to the page so it is linked with the code-behind file.
The conversion does not do the following:
a. Convert inline code to code in the class file.
To convert a single-file .aspx page to code-behind
1. Open an existing project, or create a new ASP.NET Web application.
2. On the Project menu, click Add Existing Item.
3. Browse to the .aspx page that you want to convert.
4. Click Open. Visual Studio will display the following message:
There is no class file in the project associated with the Web Form ''. Create a new class file now?
5. Click Yes. Visual Studio will create the code-behind file and link it to the .aspx page.
6. Click the Show All Files button in Solution Explorer, and expand the tree below your newly converted file to see the code-behind class file.
7. Open the new .aspx file.
8. In HTML view, inspect the file to make sure it contains an @ Page directive at the top that contains the CodeBehind attribute.
9. Inspect the file to make sure it contains an HTML
It might be that the only thing you want to do with a single-file Web Forms page in Visual Studio is to convert it to a code-behind Web Forms page. Using Visual Studio to convert a single-file page to a code-behind page automatically accomplishes the following:
1. Generates a code-behind class file for the page.
2. Adds the appropriate page directives to the page so it is linked with the code-behind file.
The conversion does not do the following:
a. Convert inline code to code in the class file.
To convert a single-file .aspx page to code-behind
1. Open an existing project, or create a new ASP.NET Web application.
2. On the Project menu, click Add Existing Item.
3. Browse to the .aspx page that you want to convert.
4. Click Open. Visual Studio will display the following message:
There is no class file in the project associated with the Web Form '
5. Click Yes. Visual Studio will create the code-behind file and link it to the .aspx page.
6. Click the Show All Files button in Solution Explorer, and expand the tree below your newly converted file to see the code-behind class file.
7. Open the new .aspx file.
8. In HTML view, inspect the file to make sure it contains an @ Page directive at the top that contains the CodeBehind attribute.
9. Inspect the file to make sure it contains an HTML
Basic Idea on JSON
What is JSON?
JSON is a very lightweight data format based on a subset of the JavaScript syntax, namely array and object literals. JSON allows communicating with server in a standard way. JSON is used as communication notation instead of XML.
JSON objects are typed while XML data is typeless
1.JSON types: string, number, array, boolean,
2.XML data are all string
JSON stands for Javascript Object Notation which is a data structuring format that is extremely clean and lightweight. Even though JSON is native to javascript (as in, it can be turned into an object directly by javascript), it is quite easy to handle with other languages, making it an ideal replacement of XML when javascript is involved with the exchange of data (i.e. ajax).
var fruitColors =
{
"apple":"green",
"banana":"yellow",
"orange":"orange"
};
alert(fruitColors .apple); //outputs "green"
alert(fruitColors .orange); //outputs "orange"
The above code creates an javascript object bike with two properties apple and orange
JSON Structures
• A collection of name/value pairs
In various languages, this is realized as an object, record,struct, dictionary, hash table, keyed list, or associative array
• An ordered list of values
In most languages, this is realized as an array, vector, list, or sequence
JSON Object Notation
• A JSON object is an unordered set of name/value pairs
• A JSON object begins with { (left brace) and ends with } (right brace)
• Each name is followed by : (colon) and the name/value pairs are separated by , (comma)
For more info please visit:
http://msdn.microsoft.com/en-us/library/bb299886.aspx
http://www.json.org/
http://en.wikipedia.org/wiki/JSON
JSON is a very lightweight data format based on a subset of the JavaScript syntax, namely array and object literals. JSON allows communicating with server in a standard way. JSON is used as communication notation instead of XML.
JSON objects are typed while XML data is typeless
1.JSON types: string, number, array, boolean,
2.XML data are all string
JSON stands for Javascript Object Notation which is a data structuring format that is extremely clean and lightweight. Even though JSON is native to javascript (as in, it can be turned into an object directly by javascript), it is quite easy to handle with other languages, making it an ideal replacement of XML when javascript is involved with the exchange of data (i.e. ajax).
var fruitColors =
{
"apple":"green",
"banana":"yellow",
"orange":"orange"
};
alert(fruitColors .apple); //outputs "green"
alert(fruitColors .orange); //outputs "orange"
The above code creates an javascript object bike with two properties apple and orange
JSON Structures
• A collection of name/value pairs
In various languages, this is realized as an object, record,struct, dictionary, hash table, keyed list, or associative array
• An ordered list of values
In most languages, this is realized as an array, vector, list, or sequence
JSON Object Notation
• A JSON object is an unordered set of name/value pairs
• A JSON object begins with { (left brace) and ends with } (right brace)
• Each name is followed by : (colon) and the name/value pairs are separated by , (comma)
For more info please visit:
http://msdn.microsoft.com/en-us/library/bb299886.aspx
http://www.json.org/
http://en.wikipedia.org/wiki/JSON
Monday, February 8, 2010
Problem using AJAX call in IE6 and IE7
IE6 & IE7 makes problem when use xmlhttprequest for ajax
At first time when I used core ajax using xmlhttprequest. Using this technique we sent parameter as querystring through the url,like this,
For the first time it is working fine,but when you try to second time in the same browser(IE6) its not work.
This is becuse Internet Explorer will also cache dynamic pages and this is a problem because the URL of the page may not change but the content will.A workaround for this situation can be achieved by adding a unique time stamp or random number, or possibly both, typically using the Date object and/or Math.random() such as url=url+"&sid=test"+Math.random();.
As for example:
For simple document request the query string delimiter '?' can be used, or for existing queries a final sub-query can be added after a final '&' – to append the unique query term to the existing query. The downside is that each such request will fill up the cache with useless (never reused) content that could otherwise be used for other cached content (more useful data will be purged from cache to make room for these one-time responses).
A better workaround can be achieved by adding meta tags to dynamic pages in order to make them no-cachable:
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
For more info please visit:
http://en.wikibooks.org/wiki/JavaScript/XMLHttpRequest
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx
http://stackoverflow.com/questions/1229821/problem-using-ajax-call-in-ie6-and-ie7-i-am-asking-the-same-question-again-ca
At first time when I used core ajax using xmlhttprequest. Using this technique we sent parameter as querystring through the url,like this,
function GetEmailId()
{
var url="http://server.com/test.aspx";
url=url+"&sid=test";
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function statechangedLogin()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.responseText=="Login")
{
//write your code
}
}
}
For the first time it is working fine,but when you try to second time in the same browser(IE6) its not work.
This is becuse Internet Explorer will also cache dynamic pages and this is a problem because the URL of the page may not change but the content will.A workaround for this situation can be achieved by adding a unique time stamp or random number, or possibly both, typically using the Date object and/or Math.random() such as url=url+"&sid=test"+Math.random();.
As for example:
function GetEmailId()
{
var url="http://server.com/test.aspx";
url=url+"&sid=test"+Math.random();
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
For simple document request the query string delimiter '?' can be used, or for existing queries a final sub-query can be added after a final '&' – to append the unique query term to the existing query. The downside is that each such request will fill up the cache with useless (never reused) content that could otherwise be used for other cached content (more useful data will be purged from cache to make room for these one-time responses).
A better workaround can be achieved by adding meta tags to dynamic pages in order to make them no-cachable:
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
For more info please visit:
http://en.wikibooks.org/wiki/JavaScript/XMLHttpRequest
http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx
http://stackoverflow.com/questions/1229821/problem-using-ajax-call-in-ie6-and-ie7-i-am-asking-the-same-question-again-ca
scrollTop not work in IE6
scrollTop problem in IE6
I face a lots of problem ie6.Now I want to share one with you and how to solve it.
Hope that it may helps you.
divObj.scrollTop=0 moves to top of the div but it is not working in IE6.
To solve this you can use:
divObj.scrollTop = divBody.offsetTop; //for scroll to top of the div
divObj.scrollHeight = divBody.offsetHeight; //for scroll to bottom of the div
for more info please visit:
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
I face a lots of problem ie6.Now I want to share one with you and how to solve it.
Hope that it may helps you.
divObj.scrollTop=0 moves to top of the div but it is not working in IE6.
To solve this you can use:
divObj.scrollTop = divBody.offsetTop; //for scroll to top of the div
divObj.scrollHeight = divBody.offsetHeight; //for scroll to bottom of the div
for more info please visit:
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
Subscribe to:
Posts (Atom)