I'm writing a web application in javascript that will be served to the clients' browser. The intent is for the app to appear to the client as a monolithic application, not a series of interlinked refreshing web pages.
My question deals with common architecture. In order to relate the question I'll mention a specific feature of the web app is a "tour"; when the client clicks a button labeled "tour" the web app will load a div with a bit about the app itself, and what it can do for the user. There are two ways this could be handled, the client browser could fetch the tour markup from the server when the user clicks the button, or the server could download it (and all other such features) when the app is initially downloaded.
If I fetch the tour on demand, then I possibly save network bandwidth as not everyone will take the tour, the app will be smaller too. But this means that in order for someone to fully use the app there will be more network congestion as there will be another hit on the network for loading the tour.
If I just serve all the features initially, the app is larger, but there is less congestion on the network because, once downloaded, there is less need to access the network (unless a fresh copy of the app is required (ie if-modified-since).
This 'tour' feature isn't really the issue itself, it's just an example to explain my question. How to balance caching vs demanding in web app design?