I’m looking for tips on how to get the browser to kick off an AJAX call as soon as possible into processing a web page, ideally before the page is fully downloaded.
Here’s my approximate motivation: I have a web page that takes, say, 5 seconds to load. It calls a web service that takes, say, 10 seconds to load. If loading the page and calling the web service happened sequentially, the user would have to wait 15 seconds to see all the information. However, if I can get the web service call started before the 5 second page load is complete, then at least some of the work can happened in parallel. Ideally I’d like as much of the work to happen in parallel as possible.
My initial theory was that I should place the AJAX-calling javascript as high up as possible in the web page HTML source (being mindful of putting it after the jquery.js include, because I’m making the call using jquery ajax). I’m also being mindful not to wrap the AJAX call in a jquery ready event handler. (I mention this because ready events are popular in a lot of jquery example code.)
However, the AJAX call still doesn’t seem to get kicked off as early as I’m hoping (at least as judged by the Google Chrome “Timeline” feature), so I’m wondering what other considerations apply.
One thing that might potentially be detrimental is that the AJAX call is back to the same web server that’s serving the original web page, so I might be in danger of hitting a browser limit on the # of HTTP connections back to that one machine? (The HTML page loads a number of images, css files, etc..)
You can use the jQuery onavailable plugin, which will execute as soon as an element is rendered on the page. You can have it execute once an element that is high up on the page renders.