For our situation, let's pretend the above mentioned query takes 500ms and the time to actually render the html for the rest of the page takes 500ms (until document ready). There are three general ways to get your front-end widget to initialize. In the interest of simplifying things, we're going to assume outside factors (like network congestion, server availability, etc) are not influencing our decision.
method 2 - put the data as an ajason request (not ajax, because who uses xml on the web any more?)This has the benefit of enabling the server to send back the core html (500ms) and THEN fetch the rest of the page. This means the user has SOME content in 500ms, and instead of staring at nothing (or the old page) for 1 second, they see SOMETHING in 500ms. This has the downside of actually requiring the same amount of time (if not more) than the above method. The biggest benefit is that is CAN make the system seem more responsive.
I don't necessarily recommend this approach as a defacto starting point. Before going down this path, you should make sure you've done the following:
- minify and consolidate all your css and js
- consolidate and pack all your images
- use a cdn or edge server for static assets and content
- properly set cache-control headers and usie etags where appropriate
Don't start with this approach, but it is certainly a way to squeeze a little more performance out of your user interface.