Defer HTML generation via handlebars.js

Question

We have a page that displays enormous amount of data.

Currently, the entire page is generated on the IIS server and then downloaded to the browser.

Due to the amount of code being executed on the server a performance issue is visible to the testing team.

We are planning to use handlebars.js to delegate the task of generating the html from the server to the browser.

So, basically the server code will be refactored to quickly generate some json data which will be sent to the browser and the html will be generated on the browser, hence reducing the amount of data being transmitted from the server to the browser.

The thought that straight away comes to my mind is that there's so much(a lot) of html to be generated that the javascript may cause the browser to hang and very much would not be a pleasing user experience.

Hence, I want to process an amount 'x' of json objects such that the html they generate provide just a little amount of scroll, AND when the user scrolls and the page is about to reach the bottom, I generate the next 'x' amount of json objects, and so on.

As a reference this would be something like the goolge image search where scrolling to the bottom of the screen automatically lists the next set of images.

However, in my case I'll already have the json objects loaded on my page.

We already have handlebars added to the project and would like to keep third party libraries at a minimum.

Answer 1

Only send a limited amount of results when you query the database (for example 10 results). Then when they get to the end of the results list, they would hit a button that says, for example, "Load More" and that would initiate an AJAX request to your application to query the database and return the next 10 results, and so on. You shouldn't be sending the entire data-set back at once that is why you are experiencing memory performance issues.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/waypoints.min.js"></script>

<script>
$(document).ready(function(){

     // will initiate when the element with id="my_results" first comes into the users view
     $('#my_results').waypoint(function(){
            // do you stuff with the json that you already have loaded on the page (this is the callback function)
       },
       { offset: 'bottom-in-view' }
     );

});
</script>