Synchronous XMLHttpRequest on the main thread is deprecated

近期看到这个报错信息，查阅对比很多资料，主要原因是 ajax 的同步加载问题。

stackOverflow

Why has this message suddenly started to appear in the Firefox console?

I’m using JQuery 1.7.1.

What in my app could I be doing that has caused this message to start appearing?

Answer

Using jQuery to append a script tag to the document will cause it to load the script with async:false and trigger this warning.

As in:

var script = $("<script></script>");
script.attr("src", player.basepath + "whatever.js");
$(document.body).append(script);

You have code performing synchronous XHR/Ajax, i.e. Ajax requests that block until they are completed.

When using jQuery, you’d do so by specifying async: false in the settings object of jQuery.ajax().

The solution is to refactor any of your code doing synchronous requests, i.e. kill all instances of jQuery.ajax({async: false}) and helper functions, as well as xhr.open(..., false), include code in third-party libraries you may use. Also, since jQuery 1.7.1 is rather old by standards of the web, I’m not sure if that jQuery version still does internal sync requests in certain cases, you’ll have to check for that as well and upgrade jQuery if so.

其他参考

有时html文件会报这样的错误: Synchronous XMLHttpRequest on the main thread is deprecated。原因是你的 ajax 执行了同步操作，即async设置为False，当然它并不影响程序的运行，但是右边有一道黄杠确实令人不爽，建议还是改成True为好(不设置默认为True)。

chrome控制台 提示禁告：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

解释： 这个警告不是 JS 代码错误；而是不规范的写法，可能会影响到用户体验效果。

翻译结果：大体意思是 XMLHttpRequest ajax 发送请求，是在浏览器js的主线程上，ajax同步发送请求引起的，这样会造成不好的用户体验。那么实际上的流程如下：

1.浏览器发出 AJAX 请求

2.现在的主线程是单线程

3.ajax 请求是同步发出，引起的JS阻塞，界面卡死，用户体验不好

总结：Ajax 请求分 sync 和 async 两种模式。如果请求是 sync 的，在请求返回之前线程会一直阻塞，如果请求是在主线程中发起的，那就会造成整个浏览器阻塞。
另外一个就是主线程。这段话应该是针对HTML5说的，因为在HTML5以前，JavaScript是完全的单线程方式，主线程之外不存在其他线程。但在HTML5中增加了 web Worker对象，每个 web Worker运行在一个独立的线程中，web Worker线程被阻塞一般是不会影响主线程和浏览器的。因此，如果必须使用 sync 的 Ajax（这种情况应该很少见），那就放到 web Worker 线程中吧，不要放到主线程里。

web worker 是运行在后台的 JS，不会影响页面的性能。

什么是 Web Worker？web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

真实情况：我们根本无需增加思想负担。了解什么work、新的api、和多线程消息机制等！我们解决它，只需要遵循以下2点一般就可以解决

1.AJAX 请求 变为异步：这也是ajax默认方式，不然用ajax也失去了本质意义，同步很少。async: false // 轻轻方式-异步

2.接受的请求，返回一个html代码段，里面包含了<script src="/scripts/script.js"></script>这样脚本文件引用！ 才会出现这种警告！

<div></div>
<script src="/scripts/script.js"></script> 

备注：这样的情况很多，比如你要请求一段html 用于局部刷新显示到页面，或者请求后台模版，而这段html里 还有<script scr="xx.js"></script> 引用，就会出险上述警告

解决办法：依据第二点

1.请将 <script src="/scripts/script.js"></script> 提前写入前台页面，从发送过来的HTML 代码段剥离出去，亲测有效！国外网友也是这样总结！

2.将引用的外部js脚本文件，写到dom里面，以

<script type="text/javascript">
console.log('I am out of js context，now we use script tag to insert into html');
</script>

总之：如果请求HTML代码段或者HTML模版，不要直接引入外部js的方式就可以，有很多技巧，大家自行发挥，还要2种方式可以解决；想好了给我留言 哈哈哈！

提示你：此法可完美hold住，又不耽误继续引用外部js脚本，吼吼吼！

$.getScript('jsUrl', function() {
  // console.log(jsUrl[i] + " loaded...");
});  

参考链接

https://stackoverflow.com/questions/24740773/synchronous-xmlhttprequest-on-the-main-thread-is-deprecated

https://blog.csdn.net/xllily_11/article/details/51879420

https://blog.csdn.net/xllily_11/article/details/51879420