關于chrome控制臺警告：Synchronous XMLHttpRequest on the main thread終極解決辦法

背景：  

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

解釋： 這個警告并不是錯誤，不是邏輯和代碼錯誤；而是瀏覽器檢測出來的一種不建議寫法和用法的一種警示，完全不影響程序的執(zhí)行和正常運行！

但是，【注意我這里說的是但是，一般也很重要】：我是連警告框都無法容忍的，因為我就是這么極客 這么帥！。那么這個煩人的黃色警告，到底是什么意思和怎么解決掉呢？

結論和現(xiàn)象： 我發(fā)現(xiàn)有不少同學，也遇到過這個問題和疑惑，并且根據(jù)網(wǎng)絡其他大神的總結和分析，完全解決不掉！那是因為他們總結的：只知其一，不知其二；

那么我們來分析下為什么會出現(xiàn)這樣的場景和 在什么情況下會出現(xiàn)這個警告，并且怎么解決！

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

翻譯結果：大體意思是  XMLHttpRequest  【ajax】發(fā)送請求，是在瀏覽器js的主線程上，ajax同步發(fā)送請求引起的，這樣會引起很不好的用戶體驗，可能導致瀏覽器卡死等等！

1.AJAX 請求

2.主線程-單線程

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

總結：一個是Ajax請求分異步和同步2種模式。如果請求是同步的，在請求返回之前線程會一直阻塞，如果請求是在主線程中發(fā)起的，那就會造成整個瀏覽器阻塞。
另外一個就是主線程。這段話應該是針對HTML5說的，因為在Html5以前，JavaScript是完全的單線程方式，主線程之外不存在其他線程。但在HTML5中增加了Worker對象，每個Worker運行在一個獨立的線程中，Worker線程被阻塞一般是不會影響主線程和瀏覽器的。因此，如果非要使用同步的Ajax（這種情況應該很少見），那就放到Worker線程中吧，千萬千萬不要放到主線程里。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

真實情況：我們根本無需增加思想負擔。了解什么work、新的api、和多線程消息機制等！我們解決它，只需要遵循以下2點一般就可以解決

1.AJAX 請求 變?yōu)楫惒剑哼@也是ajax默認方式，不然用ajax也失去了本質(zhì)意義，同步很少

async: false   // 輕輕方式-異步

2.接受的請求，返回一個html代碼段，里面包含了<script src="/scripts/script.js"></script>  這樣腳本文件引用！ 才會出現(xiàn)這種警告！

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

備注：這樣的情況很多，比如你要請求一段html 用于局部刷新顯示到頁面，或者請求后臺模版，而這段html里 還有<script scr="xx.js"></script> 引用，就會出險上述警告

解決辦法：依據(jù)第二點

1.請將 <script src="/scripts/script.js"></script> 提前寫入前臺頁面，從發(fā)送過來的HTML 代碼段剝離出去，親測有效！國外網(wǎng)友也是這樣總結！

2.將引用的外部js腳本文件，寫到dom里面，以

<script type="text/javascript">

console.log('我是外部js內(nèi)容，現(xiàn)在通過script 標簽寫到到html里');

</script>

親測有效！

總之：如果請求HTML代碼段或者HTML模版，不要直接引入外部js的方式就可以，有很多技巧，大家自行發(fā)揮，還要2種方式可以解決；想好了給我留言 哈哈哈！

提示你： $.getScript('jsUrl', function() {
            // console.log(jsUrl[i] + " 加載完畢...");
        });  此法可完美hold住，又不耽誤繼續(xù)引用外部js腳本，吼吼吼！