前端面試：js同步與異步問題

前言

我原本是打算寫一篇co源碼精讀(爲啥讀co，由於它短)，然鵝發現本身存在一系列基礎問題沒有搞透徹，打算寫一個js基礎系列文章，總結本身的理解(copy)，但願與你在學習路上一同進步。首先問問本身當面試官問到js中的同步和異步，這個問題該怎麼回答？理解一個問題無非是what-why-how js同步和異步問題是什麼-->爲何會產生異步問題-->如何解決。

1、JavaScript起源

技術的出現,和應用場景密切相關的。JavaScript誕生於1995年。當時，它的主要目的是處理之前由服務器端語言（如Perl）負責的一些輸入驗證操做。在JavaScript問世以前，必須把表單數據發送到服務器端才能肯定用戶是否沒有填寫某個必填域，是否輸入了無效的值。Netscape Navigator但願經過JavaScript來解決這個問題。起初名字爲livescript，可是後來Netscape(網景)與Sun公司成立了一個開發聯盟。Netscape爲了搭上媒體熱炒Java的順風車，臨時把LiveScript更名爲JavaScript，因此從本質上來講JavaScript和Java沒什麼關係（趁熱度）。 現在，JavaScript的用途早已再也不侷限於簡單的數據驗證，而是具有了與瀏覽器窗口及其內容等幾乎全部方面交互的能力。今天的JavaScript已經成爲一門功能全面的編程語言

總結:js最初的用途是爲來實現用戶與瀏覽器的交互

2、JS爲什麼是單線程的？

JavaScript的單線程，與它的用途有關。做爲瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操做DOM。這決定了它只能是單線程，不然會帶來很複雜的同步問題。好比，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另外一個線程刪除了這個節點，這時瀏覽器應該以哪一個線程爲準？

因此，爲了不復雜性，從一誕生，JavaScript就是單線程，這已經成這門語言的核心特徵，未來也不會改變。

注：所謂單線程，是指在JS引擎中負責解釋和執行JavaScript代碼的線程只有一個。

3、計算機的同步與異步（重點）

計算機領域中的同步（Synchronous）和異步（Asynchronous）和咱們生活中的同步和異步的概念是剛好相反的，感受是翻譯要背這個鍋。生活中的同步，突出的是‘同’，相同的步伐，是咱倆一塊兒行動，好比一塊兒去逛街吃飯飯睡覺覺。異步則是你忙你的，我忙個人，步調不致且互不干擾。難到計算機裏的同步和異步不是這樣？確實不是。

"計算機的同步"就比如：你去外地上學人生地不熟，忽然生活費不夠了；此時你決定打電話回家，通知家裏轉生活費過來，但是當你撥出電話時，對方一直處於待接聽狀態(即：打不通，聯繫不上)，爲了拿到生活費，你就不停的oncall、等待，最終可能不能及時要到生活費，致使你今天要作的事都沒有完成，而白白花掉了時間。

"計算機的異步"就是：在你打完電話發現沒人接聽時，猜測：對方可能在忙，暫時沒法接聽電話，因此你發了一條短信(或者語音留言，亦或是其餘的方式)通知對方後便忙其餘要緊的事了；這時你就不須要持續不斷的撥打電話，還能夠作其餘事情；待必定時間後，對方看到你的留言便回覆響應你，固然對方可能轉錢也可能不轉錢。可是整個一天下來，你還作了不少事情。或者說你找室友臨時借了一筆錢，又開始happy的上學時光了。

總結：計算機中的同步就是排隊等待，假如你是第一百零一個備胎，那你只能等前面的一百個爆了以後才能‘處理’你。異步就是，儘管你是第一百零一個，她仍是能照顧到你的感覺。

4、js單線程爲何會有'異步'問題

看完前面的鋪墊你是否會產生這些疑問，JS是單線程的，那麼他是如何是實現異步操做的？AJAX異步發送和回調請求，還有setTimeout也看起來像是多線程的？不急慢慢來

• js是同步的？

是的，單線程，那確定只能同步(排隊)執行咯

• js爲何須要異步?

若是JS中不存在異步,只能自上而下執行,萬一上一行解析時間很長,那麼下面的代碼就會被阻塞。 對於用戶而言,阻塞就意味着"卡死",這樣就致使了不好的用戶體驗

• js單線程又是如何實現異步的呢?

經過事件循環(event loop) 實現'異步'

經典問題：

console.log('1')
setTimeout(function(){
 console.log('2')
},0)
console.log('3')  
//       1，3，2
複製代碼

也就是說,setTimeout裏的函數並無當即執行,而是延遲了一段時間,知足必定條件後,纔去執行的,這類代碼,咱們叫異步代碼。

因此,這裏咱們首先知道了JS裏的一種分類方式,就是將任務分爲: 同步任務和異步任務

雖然JS是單線程的可是瀏覽器的內核是多線程的，在瀏覽器的內核中不一樣的異步操做由不一樣的瀏覽器內核模塊調度執行，異步操做會將相關回調添加到任務隊列中。而不一樣的異步操做添加到任務隊列的時機也不一樣，如 onclick, setTimeout, ajax 處理的方式都不一樣，這些異步操做是由瀏覽器內核的 webcore 來執行的，webcore 包含上圖中的3種 webAPI，分別是 DOM Binding、network、timer模塊。

按照這種分類方式:JS的執行機制是

• 首先判斷js代碼是同步仍是異步,同步就進入主進程,異步就進入event table
• 異步任務在event table中註冊函數,當知足觸發條件後,被推入event queue
• 同步任務進入主線程後一直執行,直到主線程空閒時,纔會去event queue中查看是否有可執行的異步任務,若是有就推入主進程中 以上三步循環執行,這就是event loop

總結：同步能夠保證順序一致，可是容易致使阻塞；異步能夠解決阻塞問題，可是會改變順序性，根據不一樣的須要去寫你的代碼。

每週都會持續更新，您的點贊，收藏，關注三連擊是個人動力，決定了前方的路怎麼走,就不要總回頭看，peace&love。