• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET Understanding Script Combining
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

Understanding Script Combining

Introduction

What is ScriptCombining?  It's all about network latency.  Conventional thinking was to break apart script files into small chunks so that the browser only needs to download the minimal set required.  The idea was great, and it could even have a positive impact on your application, until the laws of the internet start to interfere.  The problem is that each script file must initiate a connection to the server.  Connections have some degree of overhead involved from the aspect of the server, so splitting a file in 2 and serving it up over 2 requests instead of one, will take slightly longer.  But that's nothing compared to the effects of network latency.

Latency, is the minimum time it takes for a packet to travel from one location to the next.  We're all familiar with the idea of latency, as it's clearly evident when you're speaking on the phone to someone across the world.  Think of the delay before they hear what you said, and vice-versa.  The same laws of physics apply to HTTP connections.  For HTTP, the latency is assessed per connection.  So for every connection your site makes back to the server during a page load (or partial AJAX load), your load time increases by a given number.   If we go back to our phone conversation analogy, there's no noticeable delay while you're talking, but think about what happens each time you stop talking and wait for a response from the other side.  Those delays are all additive, just like in our HTTP request/response pairs. 

To put this to some hard numbers, imagine your site has 30 'objects' on the page.  An object is something that requires making a connection to the server - this could be a javascript file, an Image, a flash video, or even a stylesheet.  Now let's imagine some unfortunate soul on the other side of the world is viewing your site, or running your web application.  If their average latency is 300ms, you're talking about a minimum page load time of 4.5 seconds based on the browsers ability to have 2 simultaneous connections (300ms/roundtrip * 9 connections /2 connections per roundtrip) = 4.5 seconds

If you want to simulate this in an ASP.NET application, add a HTTPModule to your application and insert a System.Threading.Thread.Sleep(300) into the BeginRequest event.  Now for each request made to your application, there will be a 300ms delay representing the latency.

Caching Effect on Latency

So what about the effects of browser caching?  Javascript files along with CSS and Images are all cached resources for a browser.  As long as these items are in the browse's cache, the client does not need to initiate a request (http connection) with the server, which means no latency penalty is incurred.  Tip: When setting cache headers, remember that using a conditional request (If-Modified-Since header) will still require an HTTP connection.  Stick with Expires or Cache-Control headers, which will alleviate the need for any HTTP connection once the item has been added to the cache.  Learn more about caching from w3.org. You can set the cache characteristics of specific filetypes through your webserver, or by adding response headers dynamically. 

A recent study published from yahoo though, shows an astonishing 20% of page views are done with an empty cache.  While that number seems high, it certainly points out that empty cache visits are not edge case, and should be given some attention.  Besides, we all know how important first impressions are, so even if your application only loads slow the first time a user visits, that may also be the last time.

Taking Action

It should be pretty clear now that latency has a significant impact on your web site/application performance.  And the to make matter worse, it's not something that you're likely to notice during testing since your latency will be minimal.  That's why defensive programming is a priority here.  And it's not that difficult either..

Analyze

Download an HTTP monitor like Fiddler (http://www.fiddlertool.com/fiddler/version.asp)  Use the tool to examine how many connections are made during an empty and full cache request. 

Minimize Connections

Minimize the total number of HTTP requests by combining separate script or css files into a single file.  There are utilities out there to combine CSS files and even shorten class names.  If you're using ASP.NET 3.5 SP1 you can combine Javascript resources by using the ScriptManager's CompositeScript element.  Simply add each script element as part of a "CompositeScript" and the ScriptManager will do the combining for you.  This is especially useful when you're using 3rd party tools which may contain embedded resources, and there's no actual script file to work with.  Here's how to get started..

Step 1

Download the ScriptReferenceProfiler.

Step 2

Copy the assembly into your bin directory, and add a reference to your page with the following tag:

<%@ Register TagPrefix="scriptSvc" Namespace="ScriptReferenceProfiler" Assembly="ScriptReferenceProfiler, Version=1.1.0.0, Culture=neutral" %>
Step 3

Now add the ScriptReferenceProfiler control to your web form by pasting the following tag into your "Form" tag

 

<scriptSvc:ScriptReferenceProfiler runat="server" ID="sp" />

 

Step 4

Now view your page in the Browser and copy the references which are emitted at the top of the page into the clipboard.  If you're using the WebDataGrid, you should end up with something like:

 

 

            <asp:ScriptReference Name="MicrosoftAjax.js" />
             <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.0_igControlMain.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.2_igCollections.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.3_igUIBehaviors.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.4_igEnums.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.5_igObjects.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.7_igClientStateManager.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.8_igCallback.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.9_igPropertyManagers.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridBase.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGrid.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridPaging.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridActivation.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
             <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridSorting.js"
                 Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
Step 5

Go back to your form and remove the ScriptReferenceProfiler contorl, and the references to the ScriptReferenceProfiler you added above.  Paste the contents of your clipboard into the ScriptManager tag's CompositeScript subtag as seen below.

 

 

 

<asp:ScriptManager ID="sm" runat="server">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Name="MicrosoftAjax.js" />
            <asp:ScriptReference Name="MicrosoftAjaxWebForms.js" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.0_igControlMain.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.2_igCollections.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.3_igUIBehaviors.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.4_igEnums.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.5_igObjects.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.7_igClientStateManager.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.8_igCallback.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.Scripts.9_igPropertyManagers.js" Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridBase.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGrid.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridPaging.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridActivation.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
            <asp:ScriptReference Name="Infragistics.Web.UI.GridControls.WebDataGrid.js.igWebDataGridSorting.js"
                Assembly="Infragistics35.Web.v8.3, Version=8.3.20083.169, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>
  • ASP.NET
  • Performance
  • Share
  • History
  • More
  • Cancel
Related
Recommended