背景：  

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程式碼段，裡面包含了<scriptsrc="/scripts/script.js"></script>  這樣指令碼檔案引用！ 才會出現這種警告！

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

備註：這樣的情況很多，比如你要請求一段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  歡迎加入~！氣氛熱情，歡樂多，妹子多！

web前端 聚集地，匯聚了全國頂尖的web前端熱愛者，最新技術，最炫潮流，最靠譜的話題：  做好現在！技術只是為了改變生活！JS前端實用開發QQ群 ：147250970

【前端你別鬧 】webunao

可能是最帥的技術公眾號

生活不只有技術，更有 歡樂 和 夢想

長按掃碼關注，聽我洗腦