Synchronous XMLHttpRequest on the main thread is deprecated.

You might have come across the following warning in your browser’s console:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.

This warning appears on Chrome, Firefox and Edge. It may also appear on other browsers.

What is causing this warning?

By default, an AJAX request is asynchronous. This basically means that it runs parallel to the current script. i.e. The rest of your JavaScript code will continue to execute while the AJAX request is occurring. Your code will not wait for the request to complete. It doesn’t care about the AJAX request because it’s a separate operation.

Unfortunately, beginner developers can struggle with this concept. As a result, they end up using quick and easy “hacks” instead of designing their code to utilize callbacks.

One such “hack” is to set the AJAX request to synchronous:

In the code above, are carrying out an AJAX request using jQuery. However, we set the async property to FALSE. This forces jQuery to send a synchronous request. As a result, the rest of our code will have to wait until the request has finished. This means the JavaScript alert message will not appear until the AJAX request has completed.

The problem with this approach is that the page will “hang” while the request is sending. If the request is fast, you might not notice it too much. However, if there is any sort or lag or network interruption, the page will freeze. And in most cases, the end user will notice this.

Use a callback instead.

A fix for this particular piece of code is to avoid using the async property and use the success callback instead:

In the code above, we removed the async property and created a success callback. As a result, our alert will be displayed after the AJAX request has successfully been completed.

If you are using a newer version of the jQuery library, then you should use the done method instead:

In fact, in most cases, you should be using done(). This is because the jqXHR.success() callback has been deprecated by jQuery.

AJAX requests that return HTML.

If your AJAX requests are returning raw HTML, then this warning could be triggered by the inclusion of a script tag. For example, one of your AJAX requests could be returning the following HTML:

As you can see, there is a <script> element at the end of output.

In the past, developers have noticed that this can cause the “Synchronous XMLHttpRequest” warning to be shown. It is possible that jQuery has to go and fetch that script before it can return the response. Because jQuery thinks that the script is required for the AJAX response, it fetches it in a synchronous fashion.

However, it is worth noting that I was unable to reproduce this issue using jQuery 1.12.4. In both Chrome and Edge, the warning failed to show. Therefore, it is possible that this “bug” is only present in older versions of the jQuery library. That or browsers are no longer viewing it as a synchronous call.

jQuery.holdReady()

Another possible reason that you are seeing this warning is because you are using the jQuery.holdReady() method.

If you are using the jQuery.holdReady() method to delay jQuery’s ready event, then you will have to remove it and redesign your code. This method has been deprecated because of how long it can delay code in the main document from being executed.

In plain English, it can cause performance issues that result in this warning being shown.

Facebook Comments