瀏覽器的多進程與JS單線程


Posted by Andy Tsai on 2020-04-05

瀏覽器的進程(Process)與線程(Thread)

瀏覽器是多進程,而每個進程裡會有一個或多個線程(也有人稱執行緒)來幫助它完成工作,

多進程我們可以想像成,瀏覽器分為多個小組,它們分別處理不同的任務

  • Browser Process:負責瀏覽器狀態、網路連線、網址欄、書籤等等
  • Renderer Process:負責網頁內容中的所有事情
  • Plugin Process:負責第三方插件, 像是Flash、Adobe Reader等......
  • GPU Process:負責3D繪製等等

而線程,則是小組中的成員,他們一起合作完成小組任務

Renderer Process

它幾乎負責一個網頁內容中的所有事情,我們的HTML剖析、介面處理、執行JS、非同步事件處理,都是在Renderer Process完成的

每個tab會有自己獨立的Renderer Process,這樣一來某一個tab掛掉,就不會影響其他tab,我們只要關掉掛掉的tab就好了

Renderer Process裡面的線程:
JS Thread
Event Thread
HTTP Thread
GUI Thread
等等......

你常聽到的JS是單執行緒語言,指的就是Renderer Process分配給JS的Thread只有一個,並且這個Thread是同步的

什麼是同步(Synchronous)、非同步(Asynchronous)?

同步:一次只能做一件事
例:銀行只有一個櫃臺,大家排隊叫號一個一個來,如果有人資料不齊,櫃臺會等他補完再繼續,如此也就會形成阻塞,後面的人要等到天荒地老了。

非同步:一次做好幾件事
例:接上面,如有人資料不齊全,櫃臺會叫他去旁邊補齊,先處理下一個

JS如何做到非同步效果?

看到這裡,有人可能會有疑問
既然JS是單執行緒語言,並且這個Thead同步的,那JS是如何達到非同步效果的?

答案是當JS遇到非同步事件時,會先交給其他Thead處理(請其他小組成員幫忙),處理完後移到Event Queue,待全部的JS同步程式執行完後,就會開始執行Event Queue裡的程式。

關於Event Queu的詳細運作流程,會在下一篇講解。
那些年不懂的JS - Event Loop

Reference:
https://developers.google.com/web/updates/2018/09/inside-browser-part1


#多進程 #執行緒 #線程 #javascript #瀏覽器 #w3HexSchool







Related Posts

[BE201] Express & Sequelize part 4

[BE201] Express & Sequelize part 4

[MTR04] W2 D15 練習六

[MTR04] W2 D15 練習六

在迴圈內依條件判斷新增元素

在迴圈內依條件判斷新增元素


Comments