Ajax requests ASAP right before , or on document ready too?

Question

I'm optimizing a page, but I can't tell the difference in results between these (the first one is obviously faster, but I'm not sure if it slows the rendering of the page a little or something):

This one will start the request ASAP, and modify the DOM on document ready:

<script>
$.ajax({
    url: '/some-url',
    success: function() {
        $(document).ready(function() {
            // do something
        });
    }
});
</script>
</body>

This one will start the request on document ready:

<script>
$(document).ready(function() {
    $.ajax({
        url: '/some-url',
        success: function() {
            // do something
        }
    });
});
</script>
</body>

Which one is recommended?

jAndy · Accepted Answer

Best practice here is to start the Ajax request as soon as possible, but start modifying the DOM only when the document is ready (DOMContentLoaded). To do that, you might use jQuerys Deferred objects which are wired up with jQuerys extended jXHR objects.

<script>
    var req      = $.ajax({}),
        docReady = jQuery.Deferred();

    $(function() {
        docReady.resolve();
    });

    $.when( req, docReady ).done(function( data ) {
        // read the returned data and modify the DOM
    });
</script>

It would be a waste of time to wait for starting the request until the DOM is ready. The XHR request has no business and interest in whats going on with the DOM.

It just makes more sense to decouple those two things entirely. If for some reason the DOM needs a very long time before its ready, you didn't waste the time to let the HTTP request run and collect its data. The other way around, if the request is very slow, you would waste time aswell. So your current snippets are like

DOM ready    
           -> XHR request    
                          -> Do something useful

Whereas my example is like

DOM ready    
XHR request
            -> Do something useful as soon as the DOM and request are ready

Ian · Answer

Since $.ajax doesn't depend on the DOM in any way, there's no reason why you can't call it as soon as possible. In that case, I would put it in the <head> section and call it as soon as its dependent script/script files are done (meaning at least jQuery library). Firing the AJAX request sooner means the response has the ability to come back sooner - it may not be the case that it actually happens, but that's not important.

Checking to sure the DOM is ready inside of success is necessary for you, and it's the quickest way for your code to execute. Using $.when( req ).done(function () {}) creates 2 more jQuery method calls that may or may not significantly delay the execution of your success code - it will delay it, but it will probably be insignificant.

Also, your example where you use document.ready in your success method creates the possibility that the DOM is ready and can execute immediately (in the case that the AJAX request completes before the DOM is fully loaded, which I wouldn't expect). In jAndy's example where document.ready runs immediately after $.ajax, it guarantees that it will bind an event handler for the document being ready...which means it has to be stored (causing the DOM to be ready later) and then looked up later when the event occurs, and executed. Again, the difference is possibility vs. guarantee...and all is probably insignificant (as long as you don't use your second example).

Ajax requests ASAP right before </body>, or on document ready too?

Tags:

javascript

jquery

ajax

optimization

ChocoDeveloper

2 Answers

jAndy

Ian

Recent Activity

Donate For Us