前端開發技術-剖析JavaScript單執行緒 原創

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請求的執行過程。

版權宣告：本文為原創文章，轉載請附上原文出處連結及本宣告。下載相關影片學習資料到尚矽谷官方網站。