Share via

True Asynchronous Payload

  • Article

For rendering content and feature rich web pages, here are the questions that we have in front of us:

1. How to speed up the process of data fetch/load at the server to rendering it to the web client.
2. Reduce the markup

I discussed point 2 in my previous post (another way to reduce markup is to not "Generate" X/HTML on the server, do it using XSLT on client). Anyhow 2. is also indirectly correlated to 1.

As a proposed solution, what we need here is the true asynchronous loading of the web page that is feature/content rich. So how do we achieve that!? Ironically the answer lies in both the developer's mind (what data to async) and the methodology I'm about to discuss. Here is my thought process for manually dividing the payload distribution

1. Logically separate the different data units of the web page (viz. in a news site, breaking news, stock ticker and weather information can be considered isolated if they all come from different data sources or in other words they have be explicitly loaded by using a DB call)
2. Render the page from server with placeholder markup for these logical data units (i.e. no data, no DB calls have been made so far) and a small JavaScript block containing boolean variables values set to true for which [data units] content needs to be loaded later.
3. After the server request has returned lightweight payload (missing data) and quicker response (server didn't have to do much processing cause most importantly DB calls were skipped), go through the JavaScript boolean variables set by the server, each of them signifies a data units. which ever is set to true, make AJAX call to grab data from the server and populate in the respective placeholders of data units.
4. Next is upto the developer to either render X/HTML out of the data retrieved using plain JavaScript or XSLT. Tip: If using XSL, remember they can also be loaded asynchronously! So higher performance can be achieved if the XSL is large and heavy markup is rendered out of it.
5. In the end, page will appear as being loaded asynchronously and much faster than it would have using a single server send. It's like using multiple small funnels instead of a big one, that is sequential.