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

千鋒武漢發表於2021-07-20

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

web前端培訓1

      一、 瀏覽器的程式和執行緒

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

      每個程式都可以透過建立執行緒或者呼叫執行緒來完成任務。打個比方,程式就相當於一個 公司,執行緒就相當於公司的一個部門,一個公司可以只有一個部門也可以有多個部分,公司內部的資源是共享的。

web前端培訓2

      二、瀏覽器的渲染程式

      我們前端主要和Renderer Process打交道,在這個程式裡面主要包含五個執行緒:

web前端培訓3

      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執行緒的執行過程:

web前端培訓4

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

web前端培訓5

      2、分析下面程式碼執行過程,觀察js引擎執行緒和GUI執行緒的互斥:

web前端培訓6

      在上面程式碼中,開始的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。 

web前端培訓7

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

       本文來自千鋒教育,轉載請註明出處。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2782193/,如需轉載,請註明出處,否則將追究法律責任。

相關文章