tech > code > Proofs of Concepts > Page-Level Caching of Dynamic Content using Javascript
28 Oct 2008 21:57 EST

For websites that have a high read/write ratio, and contain minimal changes to the page for a logged-in user, it is possible to cut out going to the database for the contents of the page, and instead send a flat HTML file. The HTML file contains an iframe, and the iframe is dynamic content based on the user's session. The flat HTML file references the javascript variables defined in the iframe, and alters the DOM as necessary for the user.

As a proof of concept, I've saved a forum thread, and sliced the HTML. The page contains an iframe sitting at the bottom, and javascript code in the top. The iframe is just a collection of javascript variables:

<script type="text/javascript">
var iData = new Object();
iData.loggedIn = true;
iData.username = 'Your Username';
iData.userLevel = 'Mod';
Side Note
Security must be considered - but it's not a problem. The admin pages will be dynamic (ASP.Net, PHP, Python, whatever you fancy), and would perform a check on your session to see if you are actually authorized. However, you must be careful not to render data to the page that is not public (for example IP addresses).

The javascript in the forum thread grabs this data and hides login/logout links, quote/reply links, and the admin links depending on whether or not you're logged in or not, and what user level you are.

Here are the proofs of concept. The top navigation buttons change, the quote and reply buttons appear, and as a mod, you see the edit, delete, hide and move buttons.

Be sure to view the HTML source for both the index and the small frame at the bottom to see what's going one.
The fact that they are .php files is only so I didn't need 3 poc's. You can view the PHP source for each the index and the frame - there are only a few lines of PHP.

Examples of websites that could benefit from this approach are online forums, blogs, and stackoverflow. On forums and blogs, if you are logged in, the primary difference in the page that you are seeing is a notice that you are logged in, and a comment form (or slightly different comment form). All that can be switched around with DOM manipulation easily, allowing you to cache the entire page.

On stackoverflow, the top menu bar changes, and you gain access to the ability to vote and perform other actions. It would be possible to perform a small amount of DOM manipulation to show your reputation, and use if/else statements on the actions depending on whether or not you are logged in based on the javascript variables. Once again, validation on the server-side code of 'voting up' (and other actions) will ensure that you have an active session, and that you aren't manipulating javascript variables locally.

The gains in performance in every possible case will be determined by the amount of page views that write data to the server. If every page view includes a write, there will be no performance benefits, and only complexity additions. If only 1% of page views include a write, you will go from 100 page generations to 1 page generation and 99 'cache hits' so to speak.

The most difficult aspect may be threading issues with reading and writing. If a read request comes in while a write is generating the HTML file, the read must block. The entire write of the HTML file must be atomic. If you make the write output to a temp file, and then make the move/rename atomic, less time is spent in the critical section, and you will be blocking less.

Add a comment...
required, hidden, gravatared

required, markdown enabled (help)
you type:you see:
[stolen from reddit!](http://reddit.com)stolen from reddit!
* item 1
* item 2
* item 3
  • item 1
  • item 2
  • item 3
> quoted text
quoted text
Lines starting with four spaces
are treated like code:

    if 1 * 2 < 3:
        print "hello, world!"
Lines starting with four spaces
are treated like code:
if 1 * 2 < 3:
    print "hello, world!"