Caching data by using hidden divs

Question

I'm trying to speed up response times in my ajax web application by doing the following:

Say the user requests a page whose contents don't change (e.g a web form). When the user makes a different request, I 'cache' the form by putting it in a hidden div. Before displaying the new information. So the form is basically still loaded in the browser but not visible to the user. If the user requests the same form again, it gets loaded from the hidden div. That's notably faster than doing a round-trip to the server for the form.

I do realise doing so with lots of data will probably degrade performance as the browser gets to keep a lot in memory. But I will place a limit on how much gets "cached" this way.

Now, I came up with this on my own which is why I'd like to know if there is a better/established way of doing this. It works as expected but I don't know what the possible drawbacks are (security-related perhaps?).

I would appreciate any suggestions. Many thanks.

Answer 1

I've done this before. It can be a useful technique. Just make sure the data is accurate and that you support JS disabled user agents.

EDIT: And that there is no better solution.

Answer 2

Storing the HTML code for your form in a JS variable is probably more efficient than having a hidden div with the interpretation of this HTML code (form + form fields + various markup).

If your form code is generated at the same time as the page, simply print it in a JS variable :

<script language="javascript">
var myFormCode = '<? echo $myFormCode; ?>';
</script>

(That's if you use PHP...other languages shouldn't be far from that)

If your form code is generated later, you can send it as text via JSON :

<?php
  echo json_encode($myFormCode);
?>

...and then build your form when needed, with something like that on the client side :

<script language="javascript">
  myRealFormDiv.innerHTML = eval(myJSONEncodedTextIGotViaAJAX);
</script>

JS code is obviously not exactly what you need to type in, but you probably see my point.

Answer 3

What about use APC or Memcached ?

They'll allow you to keep the html markup clean, with not 'hidden tricks' that could potentially create problems (user dont have css enabled? use IE6? what about accessibility?)

Depends on your needs, but in general way the page must contain just what it must containt, nothing else.

Answer 4

This should work and is the best solution I can think of. Whether there are any security implications really depends on your forms and how they work - nobody will be able to diagnose this without actual code.

Answer 5

Another way of doing this is to set the "Expires" or "Cache-Control" HTTP headers for the form.

If you set an "Expires" header 1 hour in the future for url http://example.com/form.html, then the next time within an hour that the user navigates to that form the HTML will be loaded without touching the server.

If you properly version your images/CSS/JS and give them far-future "Expires" headers as well, then there will be no server roundtrip, plus you'll help the performance the rest of your pages.