Does the browser launch an AJAX call right away or wait for the current operation to complete?

Question

Say I have a website on which each user has a profile.

Now a user with an existing profile wants to edit it, so he clicks the "edit my profile" button.

Assume that the user interface allowing the user to do this is complex and takes some time to render (100 ms).

AJAX call to the server to retrieve profile data takes 150 ms.

After clicking "edit my profile" I will act as follows:

• shows loading indicator
• make ajax call (150 ms)
• when the ajax call returns the user interface assembly and populates it with the returned data (100 ms)

total time: 250 ms

But ... what if I act differently:

• run ajax call
• create an interface (without content), possibly block it with a modal popup at the top that says: "Loading ..."
• when ajax call returns interface unlock and populates it

Does the browser launch an AJAX call right away or wait for the current operation to complete?

Because if this is the case, it should be faster, since it creates a user interface when calling AJAX, taking 150 ms (overlapping user interface design + AJAX call) + let's say 20 ms to update the user interface.

total time: 170 ms.

Answer 1

As the name suggests, AJAX-Calls are executed asynchronus. Thus, while your request is on its way, other JS functions can be executed without problems.