关于chrome控制台警告：Synchronous XMLHttpRequest on the main thread终极解决办法

开发工具与关键技术：vs JavaScript
作者：黄海峰
撰写时间：2019.07.15

背景：

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/.

解释： 这个警告并不是错误，不是逻辑和代码错误；而是浏览器检测出来的一种不建议写法和用法的一种警示，完全不影响程序的执行和正常运行！

但是，【注意我这里说的是但是，一般也很重要】：我是连警告框都无法容忍的，因为我就是这么极客 这么帅！。那么这个烦人的黄色警告，到底是什么意思和怎么解决掉呢？

结论和现象： 我发现有不少同学，也遇到过这个问题和疑惑，并且根据网络其他大神的总结和分析，完全解决不掉！那是因为他们总结的：只知其一，不知其二；

那么我们来分析下为什么会出现这样的场景和 在什么情况下会出现这个警告，并且怎么解决！

---

翻译结果：大体意思是 XMLHttpRequest 【ajax】发送请求，是在浏览器js的主线程上，ajax同步发送请求引起的，这样会引起很不好的用户体验，可能导致浏览器卡死等等！

1.AJAX 请求

2.主线程-单线程

3.同步请求引起的阻塞，卡死

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

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

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

---

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

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

async: false // 轻轻方式-异步

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

< div>
SOME CONTENT HERE
< /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(‘我是外部js内容，现在通过script 标签写到到html里’);

< /script>

亲测有效！

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

提示你： $.getScript(‘jsUrl’, function() {
// console.log(jsUrl[i] + " 加载完毕…");
}); 此法可完美hold住，又不耽误继续引用外部js脚本，吼吼吼！

加入： JS前端开发 QQ群 ：147250970 欢迎加入~！气氛热情，欢乐多，妹子多！

作者：小北哥哥和北妈
来源：优快云
原文：https://blog.youkuaiyun.com/xllily_11/article/details/51879420