1. 程式人生 > >js基礎總結(二)js的執行機制

js基礎總結(二)js的執行機制

這裡寫圖片描述
執行結果首先全部輸出first,然後全部輸出second。
再來看一道題:
這裡寫圖片描述
應該是依次彈出4444
這裡考察的都是JS的執行機制。事件click, focus等等,定時器setTimeout和setInterval,ajax都會觸發非同步,屬於非同步任務。js是單執行緒的一個時間點只能做一件事情,優先處理同步任務。按照程式碼從上到下執行,遇到非同步就掛起,放到非同步任務裡繼續執行同步任務,只有同步任務執行完了,才去看看有沒有非同步任務,所以等待for執行完了i變成4了,(注意這裡i是全域性變數,最後一個i++使得i變成4)。for迴圈每執行一次,onclick事件函式就會被掛起一次,共四次。迴圈結束以後點選事件觸發了四個onclick函式,接著輸出4個4。同樣的上一段程式碼settimeout設定的是非同步任務,等待執行棧的程式碼執行完畢之後才會執行非同步任務,所以這裡會等待for迴圈執行完畢才會執行定時器設定的任務

為什麼Javascript是單執行緒的?
JavaScript語言的一大特點就是單執行緒,也就是說,同一個時間只能做一件事。那麼,為什麼JavaScript不能有多個執行緒呢?這樣能提高效率啊。
JavaScript的單執行緒,與它的用途有關。作為瀏覽器指令碼語言,JavaScript的主要用途是與使用者互動,以及操作DOM。這決定了它只能是單執行緒,否則會帶來很複雜的同步問題。比如,假定JavaScript同時有兩個執行緒,一個執行緒在某個DOM節點上新增內容,另一個執行緒刪除了這個節點,這時瀏覽器應該以哪個執行緒為準?
所以,為了避免複雜性,從一誕生,JavaScript就是單執行緒,這已經成了這門語言的核心特徵,將來也不會改變。
為了利用多核CPU的計算能力,HTML5提出Web Worker標準,允許JavaScript指令碼建立多個執行緒,但是子執行緒完全受主執行緒控制,且不得操作DOM。所以,這個新標準並沒有改變JavaScript單執行緒的本質。
單執行緒就意味著,所有任務需要排隊,前一個任務結束,才會執行後一個任務。如果前一個任務耗時很長,後一個任務就不得不一直等著。
如果排隊是因為計算量大,CPU忙不過來,倒也算了,但是很多時候CPU是閒著的,因為IO裝置(輸入輸出裝置)很慢(比如Ajax操作從網路讀取資料),不得不等著結果出來,再往下執行。
JavaScript語言的設計者意識到,這時主執行緒完全可以不管IO裝置,掛起處於等待中的任務,先執行排在後面的任務。等到IO裝置返回了結果,再回過頭,把掛起的任務繼續執行下去。
於是,所有任務可以分成兩種,一種是同步任務(synchronous),另一種是非同步任務(asynchronous)。同步任務指的是,在主執行緒上排隊執行的任務,只有前一個任務執行完畢,才能執行後一個任務;非同步任務指的是,不進入主執行緒、而進入”任務佇列”(task queue)的任務,只有”任務佇列”通知主執行緒,某個非同步任務可以執行了,該任務才會進入主執行緒執行。
具體來說,非同步執行的執行機制如下。(同步執行也是如此,因為它可以被視為沒有非同步任務的非同步執行。)
(1)所有同步任務都在主執行緒上執行,形成一個執行棧(execution context stack)。
(2)主執行緒之外,還存在一個”任務佇列”(task queue)。只要非同步任務有了執行結果,就在”任務佇列”之中放置一個事件。
(3)一旦”執行棧”中的所有同步任務執行完畢,系統就會讀取”任務佇列”,看看裡面有哪些事件。那些對應的非同步任務,於是結束等待狀態,進入執行棧,開始執行。
(4)主執行緒不斷重複上面的第三步。

如圖所示,只要主執行緒空了就會去這裡寫圖片描述讀取任務佇列,這個就是javascript的執行機制。這個過程會不斷重複。