On demand loading is a technique which enables the user to download only the element/content when it is needed. This results in a faster application because now the user is not downloading all the unnecessary content. In this article we are going to implement On-Demand loading to display help text to the users.

Introduction:

On demand loading is a technique which enables the user to download only the element/content when it is needed. This results in a faster application because now the user is not downloading all the unnecessary content. In this article we are going to implement On-Demand loading to display help text to the users.

Help-Text Embedded Inside the Page:

We will use a simple hyperlink to show/hide the help text. The user clicks on the link and the help text is displayed. When the user clicks the link again the help text is made hidden.

 <a href="#" id="link">Show</a>
  <div id="helpDiv">

   As developers we sit static on a chair for 7-8 hours everyday. We solve problems and develop interesting applications. Each day we learn something new
that enhances our knowledge. Unfortunately, we don’t realize that the process of getting smarter is leaving our health vulnerable. No matter how comfortable
you feel on your chair it will have a deep impact on your health.

....... and so on

    </div>
 

And here is the JavaScript code to toggle the show/hide of the helpDiv element.

<script language="javascript" type="text/javascript">

$(document).ready(function()
{
    // hide all the elements
    $("#helpDiv").hide();

    $("#link").click(function()
    { 
         var currentText = $("#link").text();   
             
        // toggle between hide and show          
         $("#helpDiv").toggle();
                   
        $("#link").text(currentText == "Show" ? "Hide" : currentText);
     
    }); 

});


</script>

Let's run Fiddler and see what is going on behind the scenes. As, you can see that the page size is around 3K which is mainly because of the embedded help text inside the page. This is a bad practice because now the page size is dependent on the help text. If the help text increases so does the overall page size.




Moving Help Text Out to a Different File:

Let's move the help text out to a different file so we can decrease the page size. We have created a page called Help.aspx which will contain the help text. Here is the HTML for the Help.aspx page:

<div>
  
  As developers we sit static on a chair for 7-8 hours everyday. We solve problems and develop interesting applications. Each day we learn something new that
enhances our knowledge. Unfortunately, we don’t realize that the process of getting smarter is leaving our health vulnerable. No matter how comfortable you
feel on your chair it will have a deep impact on your health.

and so on.......

</div>

Now, let's attach the onclick handler to the hyperlink element so that it can toggle between the show and hide state of the help text div.

<script language="javascript" type="text/javascript">

$(document).ready(function()
{
    // hide all the elements
    $("#helpDiv").hide();

    $("#link").click(function()
    { 
         var currentText = $("#link").text();
  
         $("#helpDiv").load("Help.aspx");
      
        // toggle between hide and show          
         $("#helpDiv").toggle();
                   
        $("#link").text(currentText == "Show" ? "Hide" : currentText);
     
    });
});

</script>

We are using JQuery JavaScript Library to fulfill our JavaScript needs but feel free to use any library you like.

The load function of JQuery is responsible for loading the contents of the URL and placing it in the element's innerHTML property.



Although we have removed the help text from the page but now each time we click on the link it fetches the contents from the Help.aspx page. This constant fetching of the static content kills performance. We can improve the performance by introducing output caching. Add the following directive in the Help.aspx page which will cache the page for 60 seconds.

<%@ OutputCache Duration="60" VaryByParam="none" %>

Now, the Help.aspx page is only requested the first time and all the subsequent calls will be loaded from the browser cache hence improving the performance. 

Conclusion:

In this article we learned how to increase performance by using On-Demand loading of content. Static content can always be cached in the browser cache to increase drastically increase performance.

I hope you liked this article, happy programming!