成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

i_garfileo / 1144人閱讀

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

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

流程梳理

1.瀏覽器進程

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

Browser進程 (http通訊)

第三方插件進程

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

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

1.1Browser進程(HTTP請求過程)

1.1HTTP請求過程

域名解析

發(fā)起TCP的三次握手

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



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


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



?三次握手：



客戶端–發(fā)送帶有SYN標志的數(shù)據(jù)包–一次握手–服務端


服務端–發(fā)送帶有SYN/ACK標志的數(shù)據(jù)包–二次握手–客戶端


客戶端–發(fā)送帶有帶有ACK標志的數(shù)據(jù)包–三次握手–服務端

建立TCP連接后發(fā)起http請求

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

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

瀏覽器對頁面進行渲染呈現(xiàn)給用戶

HTTP與HTTPS的區(qū)別：

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

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

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

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

HTTP 無法加密，而HTTPS 對傳輸?shù)臄?shù)據(jù)進行加密

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

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

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

GUI 渲染線程

JavaScript引擎線程

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

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

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

1.4.1GUI 渲染線程

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

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

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

繪制Render樹?- 最后遍歷渲染樹并用UI后端層將每一個節(jié)點繪制出來

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

由于JavaScript是可操縱DOM的，如果在修改這些元素屬性同時渲染界面（即JS線程和UI線程同時運行），那么渲染線程前后獲得的元素數(shù)據(jù)就可能不一致了。
因此為了防止渲染出現(xiàn)不可預期的結果，瀏覽器設置GUI渲染線程與JS引擎為互斥的關系，當JS引擎執(zhí)行時GUI線程會被掛起，
GUI更新則會被保存在一個隊列中等到JS引擎線程空閑時立即被執(zhí)行。

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

1.4.2 js引擎執(zhí)行順序

宏任務(同步任務)直接執(zhí)行,其他線程先進入任務隊列等待執(zhí)行

然后任務隊列中先執(zhí)行微任務(只有異步任務)

再執(zhí)行宏任務(異步任務)(如果有任務內還包含宏任務(同步任務),繼續(xù)依此執(zhí)行1)


1.4.2宏任務與微任務

宏任務

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

setTimeout

setInterval

setImmediate

requestAnimationFrame

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

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

script方法(宏任務(同步任務))

new Promise(宏任務(同步任務)) lijizhixing?

微任務(異步任務)

由于Es6 和node出現(xiàn)產生的微任務

Promise.then() catch() finally(),一旦一個pormise有了結果,回調產生一個微任務

process.nextTick

MutationObserver

參考

淺析瀏覽器渲染原理

完整的http流程

從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理[](https://juejin.im/post/5a6547...

JavaScipt 中的事件循環(huán)(event loop)，以及微任務 和宏任務的概念

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

js引擎的執(zhí)行過程（二）

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

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

相關文章

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

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

    wanghui 評論0 收藏0

  • 前端面試--瀏覽器

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

    bigdevil_s 評論0 收藏0

  • setTimeout&Promise&Async之間的愛恨情仇

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

    Half 評論0 收藏0

  • 深入理解JavaScript運行機制

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

    phodal 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<