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

i_garfileo 發布于2019-08-26 10:14 / 1141人閱讀

摘要：為了學習困在了瀏覽器流程進程線程宏任務微任務頁面渲染的漩渦當中不可自拔所以查詢許多資料并根據理解梳理了他們的關系希望幫忙指正流程梳理瀏覽器進程進程瀏覽器一個頁面就是新的一個進程進程是資源分配的最小單位系統會給它分配內存進程通訊第三方插件進程

為了學習Promise,困在了瀏覽器http流程,進程,線程,宏任務,微任務,頁面渲染的漩渦當中,不可自拔,
所以查詢許多資料,并根據理解,梳理了他們的關系,希望幫忙指正

流程梳理

1.瀏覽器進程

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

Browser進程 (http通訊)

第三方插件進程

GPU進程(加速,3D渲染,一次)

Renderer進程(新開頁面渲染進程)

1.1Browser進程(HTTP請求過程)

1.1HTTP請求過程

域名解析

發起TCP的三次握手

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

拿到域名對應的IP地址之后，瀏覽器會以一個隨機端口（1024 < 端口 < 65535）向服務器的Web server 80端口發起TCP的連接請求。

CP/IP協議棧，還有可能要經過防火墻的過濾，最終到達WEB程序，最終建立了TCP/IP的連接。

?三次握手：

客戶端–發送帶有SYN標志的數據包–一次握手–服務端

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

客戶端–發送帶有帶有ACK標志的數據包–三次握手–服務端

建立TCP連接后發起http請求

服務器端響應http請求,瀏覽器得到html代碼

瀏覽器處理HTML代碼?渲染的主流程

瀏覽器對頁面進行渲染呈現給用戶

HTTP與HTTPS的區別：

HTTP 的URL 以[http://]()?開頭，而HTTPS 的URL 以[https://]()?開頭

HTTP 是不安全的，而 HTTPS 是安全的

HTTP 標準端口是80 ，而 HTTPS 的標準端口是443

在OSI 網絡模型中，HTTP工作于應用層，而HTTPS 的安全傳輸機制工作在傳輸層

HTTP 無法加密，而HTTPS 對傳輸的數據進行加密

HTTP無需證書，而HTTPS 需要CA機構wosign的頒發的SSL證書

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

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

GUI 渲染線程

JavaScript引擎線程

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

事件觸發線程(宏任務(異步任務))

異步http請求線程(宏任務(異步任務))

1.4.1GUI 渲染線程

解析HTML生成DOM樹?- 渲染引擎首先解析HTML文檔，生成DOM樹

構建Render樹?- 接下來不管是內聯式，外聯式還是嵌入式引入的CSS樣式會被解析生成CSSOM樹，根據DOM樹與CSSOM樹生成另外一棵用于渲染的樹-渲染樹(Render tree)，

布局Render樹?- 然后對渲染樹的每個節點進行布局處理，確定其在屏幕上的顯示位置

繪制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)

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)，以及微任務和宏任務的概念

https://juejin.im/post/5b73d7a6518825610072b42b#heading-3

js引擎的執行過程（二）

云服務器 GPU云服務器線上課程python docker離線任務深度學習與理解定時任務與觸發任務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105830.html

從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理

摘要：如果看完本文后，還對進程線程傻傻分不清，不清楚瀏覽器多進程瀏覽器內核多線程單線程運行機制的區別。因此準備梳理這塊知識點，結合已有的認知，基于網上的大量參考資料，從瀏覽器多進程到單線程，將引擎的運行機制系統的梳理一遍。前言見解有限，如有描述不當之處，請幫忙及時指出，如有錯誤，會及時修正。 ----------超長文+多圖預警，需要花費不少時間。---------- 如果看完本文后，還...

wanghui 2019-08-22 13:56 評論0 收藏0
前端面試--瀏覽器

摘要：打開一個網頁，看到服務器返回給客戶端瀏覽器的各種文件類型圖片構建瀏覽器會遵守一套步驟將文件轉換為樹。因為瀏覽器有渲染線程與引擎線程，為了防止渲染出現不可預期的結果，這兩個線程是互斥的關系。 1. 瀏覽器架構用戶界面主進程內核渲染引擎 JS 引擎執行棧事件觸發線程消息隊列微任務宏任務網絡異步線程定時器線程 2. 從輸入 url 到頁面展示...

bigdevil_s 2019-08-23 17:20 評論0 收藏0
setTimeout&Promise&Async之間的愛恨情仇

摘要：但是提出標準，允許腳本創建多個線程，但是子線程完全受主線程控制。只是將事件插入了任務隊列，必須等到當前代碼執行棧執行完，主線程才會去執行它指定的回調函數。之后全局上下文進入函數調用棧。 setTimeout 一、setTimeout 初現定義：setTimeout() 方法用于在指定的毫秒數后調用函數或計算表達式。語法： setTimeout(code, millisec...

Half 2019-08-23 15:31 評論0 收藏0
深入理解JavaScript運行機制

摘要：換句話說當一個異步過程調用發出后，調用者不會立刻得到結果，而是調用發出后，被調用者通過狀態通知或回調函數處理這個調用。 JavaScript單線程機制 JavaScript的一個語言特性（也是這門語言的核心）就是單線程。什么是單線程呢？簡單地說就是同一時間只能做一件事，當有多個任務時，只能按照一個順序一個完成了再執行下一個為什么JS是單線程的呢？ JS最初被設計用在瀏覽器中，作為...

phodal 2019-08-22 13:55 評論0 收藏0