進(線)程,微(宏)任務與http通信(串聯理解)

爲了學習Promise,困在了瀏覽器http流程,進程,線程,宏任務,微任務,頁面渲染的漩渦當中,不可自拔,
因此查詢許多資料,並根據理解,梳理了他們的關係,但願幫忙指正

流程梳理

1.瀏覽器進程

進程:瀏覽器一個頁面就是新的一個進程,進程是cpu資源分配的最小單位（系統會給它分配內存）;

1. Browser進程 (http通信)
2. 第三方插件進程
3. GPU進程(加速,3D渲染,一次)
4. Renderer進程(新開頁面渲染進程)

1.1Browser進程(HTTP請求過程)

1.1HTTP請求過程

1. 域名解析
2. 發起TCP的三次握手

常見的web server產品有 apache、nginx、IIS、Lighttpd 等

• 拿到域名對應的IP地址以後，瀏覽器會以一個隨機端口（1024 < 端口 < 65535）向服務器的Web server 80端口發起TCP的鏈接請求。
• CP/IP協議棧，還有可能要通過防火牆的過濾，最終到達WEB程序，最終創建了TCP/IP的鏈接。

 三次握手：

• 客戶端–發送帶有SYN標誌的數據包–一次握手–服務端
• 服務端–發送帶有SYN/ACK標誌的數據包–二次握手–客戶端
• 客戶端–發送帶有帶有ACK標誌的數據包–三次握手–服務端

1. 創建TCP鏈接後發起http請求
2. 服務器端響應http請求,瀏覽器獲得html代碼
3. 瀏覽器處理HTML代碼 渲染的主流程
4. 瀏覽器對頁面進行渲染呈現給用戶

HTTP與HTTPS的區別：

1. HTTP 的URL 以[http://]() 開頭，而HTTPS 的URL 以[https://]() 開頭
2. HTTP 是不安全的，而 HTTPS 是安全的
3. HTTP 標準端口是80 ，而 HTTPS 的標準端口是443
4. 在OSI 網絡模型中，HTTP工做於應用層，而HTTPS 的安全傳輸機制工做在傳輸層
5. HTTP 沒法加密，而HTTPS 對傳輸的數據進行加密
6. HTTP無需證書，而HTTPS 須要CA機構wosign的頒發的SSL證書

1.4Renderer進程(瀏覽器渲染進程)

線程:線程包含在每一個進程內,線程是cpu調度的最小單位（線程是創建在進程的基礎上的一次程序運行單位，一個進程中能夠有多個線程）;

1. GUI 渲染線程
2. JavaScript引擎線程
3. 定時觸發器線程(宏任務(異步任務))
4. 事件觸發線程(宏任務(異步任務))
5. 異步http請求線程(宏任務(異步任務))

1.4.1GUI 渲染線程

1. 解析HTML生成DOM樹 - 渲染引擎首先解析HTML文檔，生成DOM樹
2. 構建Render樹 - 接下來無論是內聯式，外聯式仍是嵌入式引入的CSS樣式會被解析生成CSSOM樹，根據DOM樹與CSSOM樹生成另一棵用於渲染的樹-渲染樹(Render tree)，
3. 佈局Render樹 - 而後對渲染樹的每一個節點進行佈局處理，肯定其在屏幕上的顯示位置
4. 繪製Render樹 - 最後遍歷渲染樹並用UI後端層將每個節點繪製出來

GUI渲染線程與JS引擎線程互斥

因爲JavaScript是可操縱DOM的，若是在修改這些元素屬性同時渲染界面（即JS線程和UI線程同時運行），那麼渲染線程先後得到的元素數據就可能不一致了。
所以爲了防止渲染出現不可預期的結果，瀏覽器設置GUI渲染線程與JS引擎爲互斥的關係，當JS引擎執行時GUI線程會被掛起，
GUI更新則會被保存在一個隊列中等到JS引擎線程空閒時當即被執行。

1.4.2 JavaScript引擎線程(主線程執行棧)

永遠只有JS引擎線程在執行JS腳本程序,
也稱爲JS內核，負責解析執行Javascript腳本程序的主線程（例如V8引擎）
只能在JavaScript引擎線程(主線程執行棧)執行 js腳本

1.4.2 js引擎執行順序

1. 宏任務(同步任務)直接執行,其餘線程先進入任務隊列等待執行
2. 而後任務隊列中先執行微任務(只有異步任務)
3. 再執行宏任務(異步任務)(若是有任務內還包含宏任務(同步任務),繼續依此執行1)

1.4.2宏任務與微任務

宏任務

• 定時觸發器線程(宏任務(異步任務))

  • setTimeout
  • setInterval
  • setImmediate
  • requestAnimationFrame
• 事件觸發線程(宏任務(異步任務))
• 異步http請求線程(宏任務(異步任務))
• script方法(宏任務(同步任務))
• new Promise(宏任務(同步任務)) lijizhixing 

微任務(異步任務)

因爲Es6 和node出現產生的微任務

• Promise.then() catch() finally(),一旦一個pormise有告終果,回調產生一個微任務
• process.nextTick
• MutationObserver

參考

• 淺析瀏覽器渲染原理
• 完整的http流程
• 從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理[](https://juejin.im/post/5a6547...
• JavaScipt 中的事件循環(event loop)，以及微任務 和宏任務的概念
• http://www.javashuo.com/article/p-ziuxtccl-h.html
• js引擎的執行過程（二）