Question

I’m working on an applicaiton using requireJS and jquery/jquery-mobile. Right now I’m trying to optimize loading and rendering performance.

Say my application can be broken down into HTML snippets, (e.g. a login form), which are present on every page. My idea is to not load the snippet every time a new page is request. Instead I create a template-version of the HTML snippet (enhanced markup) and pull this in via the requireJS !text plugin.

This works pretty nicely, so every snippet is required once, then serverd from cache and since it is already rendered, everything goes smooth after page 1.

Basically I could atomize my page into snippets, like

page { content { form { input & button }}}

and pull snippets in on demand only. While this mimimzes stuff to load from the server and rendering time, I do end up with a ton of http-requests.

Question:
Pretty generic, but… is there an approach to cutting down on the number of http requests when structuring an application like this? I guess I’m thinking websockets could be used for that, but I’m not really sure. Curious to know, if there is a nice way to do this.

Thanks!

Answer 1

So let me get this straight:-
You try to make page load times faster
So you break up the contents of the HTML file into snippets. Some snippets, e.g
header/footer/login form are common on every page, and this way you only load them once and keep rendering them from the cache.
But the first time you load the page, since all these snippets are downloaded separately, there are lots of requests.
If I got all that correctly, here’s what I suggest.

I would suggest on the first page load you actually load the entire page rendered straight from the server. Using javascript to add snippets after load can be slow.
Then on page load, you can use element selectors to save the values of all the rendered snippets to a cache. And download the rest of the snippets as well. This way, you have one (or very few) requests when the page is loaded. And all the extra requests are done in the background when the page is already loaded.