關於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.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也失去了本質意義，同步很少
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; white-space: inherit;"><span class="kwd" style="margin: 0px; padding: 0px; border: 0px; color: rgb(16, 16, 148);">async</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);">:</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);"> </span><span class="kwd" style="margin: 0px; padding: 0px; border: 0px; color: rgb(16, 16, 148);">false // 輕輕方式-非同步</span></code>
2.接受的請求，返回一個html程式碼段，裡面包含了<scriptsrc="/scripts/script.js"></script> 這樣指令碼檔案引用！ 才會出現這種警告！
<code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; white-space: inherit;"><span class="tag" style="margin: 0px; padding: 0px; border: 0px; color: rgb(125, 39, 39);"><div></span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);"> SOME CONTENT HERE </span><span class="tag" style="margin: 0px; padding: 0px; border: 0px; color: rgb(125, 39, 39);"></div></span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);"> </span><span class="tag" style="margin: 0px; padding: 0px; border: 0px; color: rgb(125, 39, 39);"><script</span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);"> </span><span class="atn" style="margin: 0px; padding: 0px; border: 0px; color: rgb(230, 67, 32);">src</span><span class="pun" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);">=</span><span class="atv" style="margin: 0px; padding: 0px; border: 0px; color: rgb(15, 116, 189);">"/scripts/script.js"</span><span class="tag" style="margin: 0px; padding: 0px; border: 0px; color: rgb(125, 39, 39);">></script></span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; color: rgb(48, 51, 54);"> </span></code>
備註：這樣的情況很多，比如你要請求一段html 用於區域性重新整理顯示到頁面，或者請求後臺模版，而這段html裡 還有<script scr="xx.js"></script> 引用，就會出險上述警告
解決辦法：依據第二點
1.請將 <scriptsrc="/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 歡迎加入~！氣氛熱情，歡樂多，妹子多！