[前端]多線程在前端的應用——Javascript的線程

     JavaScript 是單線程、異步、非阻塞、解釋型腳本語言。JavaScript 的設計就是爲了處理瀏覽器網頁的交互（DOM操做的處理、UI動畫等），決定了它是一門單線程語言。若是有多個線程，它們同時在操做 DOM，那網頁將會一團糟。

1.瀏覽器的渲染進程包含的線程

var a = 111; setTimeout(function() { console.log(222) }, 2000) fetch(url) // 假設該http請求花了3秒鐘
.then(function() { console.log(333) }) dom.onclick = function() {  // 假設用戶在4秒鐘時點擊了dom
    console.log(444) } console.log(555) // 結果 //555 //222 //333 //444

    222,333,444在555以後被輸出，也就是說計時器setTimeout、http請求fetch、事件觸發器onclick並無阻塞後面的代碼。那，發生了什麼？

   其實，JavaScript 單線程指的是瀏覽器中負責解釋和執行 JavaScript 代碼的只有一個線程，即爲 JS引擎線程，可是瀏覽器的渲染進程是提供多個線程的，以下：

1. JS引擎線程(主線程)
2. 事件觸發線程（onclick）
3. 定時觸發器線程（setTimeout）
4. 異步http請求線程（fetch）
5. GUI渲染線程
6. EventLoop輪詢處理線程

   其中，一、二、4爲常駐線程

2.消息隊列（任務隊列）

   能夠理解爲一個靜態的隊列存儲結構，非線程，只作存儲，裏面存的是一堆異步成功後的回調函數字符串，確定是先成功的異步的回調函數在隊列的前面，後成功的在後面。

   注意：是異步成功後，才把其回調函數扔進隊列中，而不是一開始就把全部異步的回調函數扔進隊列。好比setTimeout 3秒後執行一個函數，那麼這個函數是在3秒後才進隊列的。

3.1中代碼的執行流程以下

步驟1：

    主線程只執行了var a = 111;和console.log(555)兩行代碼，其餘的代碼分別交給了其餘三個線程，由於其餘線程須要二、三、4秒鐘才成功並回調，因此在2秒以前，主線程一直在空閒，不斷的探查隊列是否不爲空。

    此時主線程裏其實已是空的了（由於執行完那兩行代碼了）

步驟2：

2秒鐘以後，setTimeout成功了

步驟3：

步驟4：

參照：http://www.javashuo.com/article/p-bggzgvam-cp.html