A web page can load a lot faster and feel faster if the Javascripts files referenced on the page can be loaded after the visible content has been loaded and multiple Javascripts files can be batched into one download. Browsers download one external Javascript at a time and sometimes pause rendering while a script is being downloaded and executed. This makes web pages load and render slow when there are multiple external Javascript references on the page.
For every Javascript reference, browser stops downloading and processing of any other content on the page and some browsers (like IE6) pause rendering while it processes the Javascript. This gives a slow loading experience and the web page kind of gets 'stuck' frequently. As a result, a web page can only load fast when there are small number of external scripts on the page and the scripts are loaded after the visible content of the page has loaded.
Here's an example, when you visit Dropthings.com, you see a lot of Javascripts downloading. Majority of these are from the ASP.NET AJAX framework and the ASP.NET AJAX Control Toolkit project.
Figure: Many scripts downloaded on a typical ASP.NET AJAX page having ASP.NET AJAX Control Toolkit
There are total 15 javascript references on the page. As you see, browser gets stuck for 15 times as it downloads and processes all these external scripts. This makes page loading "feel" slower. The actual loading time is also pretty bad because these 15 http requests waste 15*100ms = 1500ms on the network latency inside USA. Outside USA, the latency is even higher. Asia gets about 270ms and Australia gets about 380ms latency from any server in USA. So, users outside USA wastes 4 to 6 seconds on network latency where no data is being downloaded. This is an unacceptable performance for any website.
You pay for such high number of script downloads only because you use two extenders from AJAX Control Toolkit and the UpdatePanel of ASP.NET AJAX.
If we can batch the multiple individual script calls into one call like Scripts.ashx as shown in the picture below and download several scripts together in one shot using an HTTP Handler, it saves us a lot of http connection which could be spent doing other valuable work like downloading CSS for the page to show content properly or downloading images on the page that is visible to user.
More : codeproject.com
0 comments
Post a Comment