loadTemplate from file causes 'Synchronous XMLHttpRequest on the main thread'... warning

[elgs]

I'm loading a template from a separate file, like this:

$("#servers").loadTemplate("templates/server.html", servers, {isFile: true});

I got the following warning in the console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

If I put the template into a script tag, instead of a separate file, there is not such warning. So is there anyway to make the console warning happy if I still want to load the template from a separate file?

[codepb]

The warning will be coming from jquery's ajax method I imagine. If you give me details of which browser you see this in I can check

[elgs]

@codepb I see this error in Chrome. If I move the template data into the same html and wrap it in a script tag, it doesn't show this warning. I was trying to reproduce the same problem in a separate project which contains only relevant files, however, it doesn't show the warning in the minimized test project. So I think the problem might be at somewhere else.

The full warning message is as follows:

pace.min.js:2 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. pace.min.js:2

When I comment out the script line with pace.min.js, the warning message shows the next js file.

[elgs]

@codepb after several hours investigation. I was able to reproduce the same problem in a minimized project.

This will guarantee to cause the warning:
$("#container").loadTemplate("./tmpl.html", [1], {isFile: true});

While replacing the array to an object will not show the warning:
$("#container").loadTemplate("./tmpl.html", {some_key: 'some_value'}, {isFile: true});

So it looks like when the data is an array, the warning is shown.

[codepb]

Ah, ok, this makes sense. Essentially the warning is raised because when you loop through an array whilst loading a file for the template, the template is loaded synchronously. This is to prevent making calls to the server that you don't need to.

Essentially, when looping through the array, and making async ajax calls, the first ajax called is made asynchronously, and then the next item in the array is processed. It looks in the cache for the template, and doesn't find it, because it's not yet been loaded from the first call for the file (as that was async). This could result in many unnecessary HTTP requests.

Making the call synchronous prevents this, as the second item in the array does not start processing until the template is loaded from the first call. Therefore the second item finds the template in the cache, and doesn't load from the server, saving many HTTP calls.

Looks like I might have to find a more elegant solution to this than just making things synchronous. I'll mark this as an enhancement and look when I get the time.