Performance impact of iFrame

Avoid using iframe for performance reasons, read more @

http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

Using this in some places can not be avoided like if we want to access an https url from a http page which is not accepted. So for handling authentication on AJAX from a http page needs a blank iframe with action to https page and method attribute. AJAX request will be submitted to iframe (intern https url, can be .net generic handler) and on server set the cookies and return the blank response to iframe and on window onload event of iframe we can do neccessary changes on parent page by directly accessing cookies through javascript to know authentication success or failure.

Want to know more about Firebug Net Tab (Firefox Addon)

Following link has detailed explanation about Firebug Net Tab useful for web developers …

http://www.softwareishard.com/blog/firebug/introduction-to-firebug-net-panel/

This site is also gives links to following few interesting Addons for developers …

• View Cookies – http://www.softwareishard.com/blog/firecookie/ (Firefox Web Developer Toolbar has Cookies tab for the same purpose)
• Export All data from Net Panel – http://www.softwareishard.com/blog/netexport/ – HTTP Archive Format (HAR)

HTTP Archive Viewer – http://www.softwareishard.com/har/viewer/

JSONView chrome extension/Firefox Addon – Dev Tools

JSONView extension/addon helps developers to parse and view JSON document directly on Chrom/Firefox browsers …

Firefox Addon – https://addons.mozilla.org/en-us/firefox/addon/jsonview/ (Firebug Addon also has a tab for seeing JSON response)

Chrome Extension – https://chrome.google.com/extensions/detail/chklaanhfefbnpoihckbnefhakgolnmc

It seems IE does not have such Addon but there is work around explained @ http://stackoverflow.com/questions/2483771/how-can-i-convince-ie-to-simply-display-application-json-rather-than-offer-to-dow

Reference:

http://my-addons.blogspot.com/2011/01/jsonview.html

Quick way to measure time taken by a code block or method call or service call

System.Diagnostics.Stopwatch timer = new System.Diagnostics.Stopwatch();
timer.Start();
<code block or method call or service call>
timer.Stop();
timer.ElapsedMilliseconds.ToString(); // capture this value using some logging mechanism to check it or you can debug it to see the value

There are many tools available in market to see the time scanning at each method between request to response life cycle.

Efficent Javascript for better YUI Compression

Efficient way of writing javascript for better YUI Compression …

• Use <cond>?s1:s2 in place of

if(<cond>){
s1
} else {
s2
}

•  Use obj.toggleClass(“c1”, cond); in place of

if(cond) {
obj.addClass(“c1”);
} else{
obj.removeClass(“c1”);
}

•  Use local variables for true/ false, null, empty string if used in multiple places

Define => var TRUE = true, FALSE = false, NULL = null; and use it.

• Use single var and Single return in a function.

var a = 1, b = 2;  instead of var a = 1; var b = 2;

• Chain It obj.addClass(“c1”).attr(“data-something”, “something”).show(); instead of

obj.addClass(“c1”); obj.attr(“data-something”, “something”); obj.show();

• Think before using substring

str.substring(1) to str.slice(1) –To Chop off 1st Character str.substring(str.length – 1) to str.slice(-1) –To get last Character

• Use if(s.length) instead of if(s.length > 0)
•  i= i + 1 => i+=1 => i++
• {“a”:123, “b”: “123”} => {a:123, b:123}
• Use variables to define literals that used in many places …

Ex: var c1 = “pause”, c2 = “playing”;
if(isPlaying) $.addClass(c1).removeClass(c2); else $.addClass(c2).removeClass(c1);
In place of

if(isPlaying) $.addClass(“pause”).removeClass(“playing”); else $.addClass(“playing”).removeClass(“pause”);

Reference:

• http://refresh-sf.com/yui/ – Tool to check javascript code efficiency for YUI Compressor
• http://www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor#fancybox-holder – Find more efficiency techniques to write

Cuzillion from Steve Souders – Test and see how sources effect the page performance

http://stevesouders.com/cuzillion/

Data URI Scheme – Base64 encoding of static file – images, css, js

Web Developers are following lot of techniques to speed up web page performance. Images are part of any modern webpage which gives good appearance at the cost of page performance.

Following are the few techniques that many uses now a days …

1. Using sprites + css to avoid many images/http calls to single image/sing http call (SpriteME tool helps you to create sprites for you)
2. Using efficent image formats instead of jpg, bmp. gif, png are lighter formats
3. Storing images in cdn servers
4. Avoid duplicate images across site pages and few more …

Base64 images using Data URL Scheme is another technique to reduce extra http calls to server.

Advantages

1. Provides a way to include data in-line in web page itself
2. It can be used with js, css & image files
3. It saves extra http calls to server.
   Ex: if a web page needs 2 js fiels, 2 css files and 5 images then its like 9 http calls to server along with 1 call for web page itself i.e. total 10 calls.
   With Data URL format/Base64 you can just have 1 http call that is meant for web page which intern has all js, css and image information.

Take your best decision about using this as some image formats will take more size when representing in Base64 format. I tested with gif of 2KB changed to 3kb of Base64 string and 12kb of png file changed to 3kb of Base64 string. So it is important to use the right image format before applying Base64 logic as it saves extra http call but it will increase the network data size if we don’t use proper image format.

References:

1. http://www.greywyvern.com/code/php/binary2base64
2. http://en.wikipedia.org/wiki/Data_URI_scheme
3. http://stackoverflow.com/questions/4881186/convert-image-to-base64-and-check-size – for C# code
4. base64_encode, base64_decode functions in PHP

Tech Talks Link

http://www.youtube.com/user/googletechtalks

Cool stuff for web developer

http://spriteme.org/ – Run spriteme on your site to see how you can optimize the many images (many http calls) to few sprite images (fewer http calls)

http://jaredhirsch.com/coolrunnings/about/ – Use it if you want to generate sprite based on your custom needs of spriting image positions.

http://www.browserscope.org/ – profiles web browsers

Watch the youtube video for more info @

http://www.youtube.com/watch?v=pNfRL-TwzZY#t=27m21s