JavaScript單線程和多線程是很多小白同學入門的時候問到最多的問題，雖然官方給出過解釋但對于新手來說并不友好，今天小千就來給大家介紹一下JavaScript的單線程。

一、 瀏覽器的進程和線程

瀏覽器的架構是多進程的，不同的瀏覽器采用不同的進程架構，這個沒有統一的標準,以谷歌瀏覽器為例，他主要有四個進程，分別是頂層的Browser process，負責標簽頁網頁呈現的Renderer Process，負責控制網頁插件的Plugin Process和負責處理GPU的GPU Process。

每個進程都可以通過創建線程或者調用線程來完成任務。打個比方，進程就相當于一個 公司，線程就相當于公司的一個部門，一個公司可以只有一個部門也可以有多個部分，公司內部的資源是共享的。

二、瀏覽器的渲染進程

我們前端主要和Renderer Process打交道，在這個進程里面主要包含五個線程：

1、GUI渲染線程，用于解析html、css，構建DOM樹和RenderObject樹，布局和繪制等瀏覽器界面渲染任務|不能和JS引擎線程同時執行。

2、js引擎線程，也就是我們常說的js內核，用于解析、運行javascript代碼，不能和GUI渲染線程同時執行。

3、事件觸發線程，用于監聽和觸發事件，可以理解成由js引擎線程來執行事件綁定代碼，然后另開事件觸發線程用來監聽事件的觸發，觸發以后把事件處理函數里面的代碼交給js引擎線程來執行，但是js是單線程的，事件處理函數里面的代碼會添加到待處理隊列的末尾，也就是等js線程空閑以后才會執行。

4、定時觸發器線程，就是經常使用的setInterval與setTimeout所使用的線程，可以理解成由js引擎線程來定義一個定時器，但是定時器的計數是另開單獨線程來計時并觸發定時，計時時間到了以后，把要執行的回調函數里面的代碼添加到待處理隊列的末尾，等待js線程空閑以后執行。

5、http請求線程，在我們使用XMLHttpRequest對象發送http請求的時候，是新開一個線程請求，檢測到對象狀態改變時，如果綁定了回調函數，異步線程就產生狀態變更事件，將這個回調里面的代碼添加到js線程末尾。

三、js引擎線程的單線程

1、分析下面代碼執行過程，以定時器觸發線程為例看不同線程和js線程的執行過程：

在上面代碼中，js代碼是由js引擎線程執行的，這里要明確，js是單線程的，同一時間只能執行一個的任務，所以有多個等待任務的時候需要排隊，排在前面的先執行，排在后面的要等待前面任務完成才能執行。開始的t1時間里面，代碼至上而下執行，當碰到setTimeout，這是個定時器，需要計時，把這個計時的任務交給定時觸發器線程（時間到了以后把要執行的代碼排隊到t1的后面t2時間里面），繼續執行js代碼。

2、分析下面代碼執行過程，觀察js引擎線程和GUI線程的互斥：

在上面代碼中，開始的t1時間里面，代碼至上而下執行，當碰到事件綁定的時候，把這個事件監聽的任務交給事件觸發線程，繼續執行js代碼。當用戶點擊按鈕，事件觸發線程監聽到事件，把事件處理函數里面的代碼從隊列末尾插入，在t2事件執行里面有三行代碼第一行是box.innerHTML = “doing something”，這行代碼是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，這個時候先讓t2時間里面的其他js代碼wait(3000);繼續執行，把box.innerHTML = "doing something"插入t2的后面t3時間里面，執行完wait(3000)以后，最后一行是box.innerHTML = “finish”，這行代碼也是頁面渲染，交給GUI渲染線程，由于GUI渲染線程和js引擎線程是互斥的，不能同時執行，把box.innerHTML = "finish"從隊列末尾插入，變成t4時間執行。所以，最后結果是，當用戶點擊的時候，div里面沒有內容，3秒以后直接顯示finish。

在前端學習過程中，js的單線程對大家理解同步和異步非常重要，熟悉js的單線程將讓大家能夠更好的理解事件，定時器和ajax請求的執行過程。

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的前端开发技术-剖析JavaScript单线程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。