瀏覽器工作原理

單執行緒的含義

瀏覽器是multi-process，一個瀏覽器只有一個Browser Process，負責管理Tabs、協調其他process和Render process 存至 memory內的 Bitmap繪製到頁面上的（pixel）：在 Chrome 中，一個Tab對應一個Render Process,Render Process是multi-thread，其中main thread負責頁面渲染（GUI render engine）執行JS （JS engine）和event loop; network component可以開2-6個I/O threads平行去處理

 

瀏覽器端的event loop

一個函式執行棧、一個事件佇列和一個微任務佇列

每從事件佇列中取一個事件時有微任務把微任務執行完，然後才開始執行事件

 

 

巨集任務和微任務

• 巨集任務，macrotask，也叫tasks，一些非同步任務的回撥會依次進入macro task queue,等待後續被呼叫，這些非同步任務包括：

  • setTimeout

  • setInterval

  • setImmediate(Node獨有)

  • requestAnimationFrame(瀏覽器獨有)

  • I/O

  • UI rending (瀏覽器獨有)

• 微任務，microtask，也叫jobs，另一些非同步任務的回撥會依次進入micro task queue，等待後續別呼叫，這些非同步任務包括：

  • process nextTick(Node 獨有)

  • Promise.then()

  • Object.observe

  • MutationObserver

  注：這裡只針對瀏覽器和NodeJS

  Promise建構函式裡的程式碼是同步執行的

• 

   

 

Nodejs架構圖

 

Node.js中的Event Loop

 

Node.js的Event Loop過程

• 執行全域性Script的同步程式碼

• 執行microtask微任務，先執行所有Next Tick Queue中所有任務，在執行Other Microtask Queue

  中的所有任務

• 開始執行macrotask巨集任務，共6個階段，從第1個階段開始執行相應每一個階段macrotask中的所有任務，注意，這裡是所有每個階段巨集任務佇列的所有任務，在瀏覽器的Event Loop中是隻取巨集佇列的第一個任務出來執行，每一個階段的macrotask任務執行完畢後，開始執行微任務，也就是步驟2

• Timers Queue -> 步驟 -> I/O Queue -> 步驟2 -> Check Queue -> 步驟2 -> Close Callback Queue -> 步驟2 -> Timers Queue ......

• 這就是Node的Event Loop【簡化版】