Saturday, August 29, 2009 3:45 PM
Kazi Manzur Rashid
Telerik Extensions for ASP.NET MVC – Upcoming ScriptRegistrar Preview
[Update: I have updated the images with a recent version which more clarifies the whole picture, the result shows the parallel version is 2x fast comparing to the plain.]
In this post, I will give you a sneak preview of the ScriptRegistrar major enhancement. Those who have checked our ScriptRegistrar or followed my blog for last few weeks already know that it has out of box support for Grouping. Combining, Caching, Compressing, Synchronizing statements between Master/Content and as far as I know, no other component including the other commercial vendors has all these features that we are providing for free and as well as open sourced. Currently we are working on parallel script downloading support that we are going to include in our next release, if you do not know about parallel script downloading let me first show you a regular example, lets say you have a page which contains five script tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Plain Script Loading</title>
</head>
<body>
<h1>Plain Script Loading example</h1>
<p>Here goes the sample body..</p>
<div id="status" style="font-family:Consolas;background-color:#ccc"></div>
<% string ticks = DateTime.Now.Ticks.ToString(); %>
<script type="text/javascript" src="Scripts/plainScript1.js?t=<%= ticks %>"></script>
<script type="text/javascript" src="Scripts/plainScript2.js?t=<%= ticks %>"></script>
<script type="text/javascript" src="Scripts/plainScript3.js?t=<%= ticks %>"></script>
<script type="text/javascript" src="Scripts/plainScript4.js?t=<%= ticks %>"></script>
<script type="text/javascript" src="Scripts/plainScript5.js?t=<%= ticks %>"></script>
<script type="text/javascript">
document.getElementById('status').innerHTML += 'You must have seen all the messages.<br>';
</script>
</body>
</html>If you run the above page with Firebug, you will find, it loads the page similar to the following:
Check the above red marked area which shows as steps of a stairway. It indicates when a browser encounters a script tag it stops its rendering until it downloads the script file. Since we have included five script files there are five steps (total six, the first one is for the page), each for a script. Now lets add the same number of script files with our ScriptRegistrar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Next ScriptRegistrar</title>
</head>
<body>
<h1>ScriptRegistrar : Parallel script loading example</h1>
<p>Here goes the sample body..</p>
<div id="status" style="font-family:Consolas;background-color:#ccc"></div>
<% string ticks = DateTime.Now.Ticks.ToString(); %>
<% Html.Telerik().ScriptRegistrar()
.Scripts(script =>
script.Add("~/Scripts/parallelScript1.js?t=" + ticks)
.Add("~/Scripts/parallelScript2.js?t=" + ticks)
.Add("~/Scripts/parallelScript3.js?t=" + ticks)
.Add("~/Scripts/parallelScript4.js?t=" + ticks)
.Add("~/Scripts/parallelScript5.js?t=" + ticks)
)
.OnDocumentReady(() =>
{%>
document.getElementById('status').innerHTML += 'You must have seen all the messages.<br>';
<%}
)
.Render(); %>
</body>
</html>(I have intentionally removed the default jQuery script form the ScriptRegistrar and did not merge it as a group to show the parallelization).
When you run the ScriptRegistrar version with the Firebug, you will get the following picture:
Now check the red marked area again, as you can see there are no steps which means download of this scripts starts almost at the same time, we are initially loading our tiny script loader(Telerik.ScriptRegistrar.js) which then loads these scripts without blocking each other. We are still working on different cases and how you can more easily define the dependencies between the groups/script files.
So to those folks who thinks that a msbuild/nant task that minifies and combines script files of a predefined directory on post build and a ScriptInclude helper method is all the optimization that can be done when it comes to script management, maybe it is okay for a small application where the number of javascript files are same or less than your hand’s finger, but for today’s highly ajax application, there are a lot of cool things that you can do to enhance its performance and we are fully committed for doing that.
Filed under: Asp.net, MVC, ASPNETMVC, ASP.NET MVC, Open Source, JavaScript, Telerik