亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

i_garfileo / 1204人閱讀

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

為了學(xué)習(xí)Promise,困在了瀏覽器http流程,進(jìn)程,線程,宏任務(wù),微任務(wù),頁面渲染的漩渦當(dāng)中,不可自拔,
所以查詢?cè)S多資料,并根據(jù)理解,梳理了他們的關(guān)系,希望幫忙指正

流程梳理

1.瀏覽器進(jìn)程

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

Browser進(jìn)程 (http通訊)

第三方插件進(jìn)程

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

Renderer進(jìn)程(新開頁面渲染進(jìn)程)

1.1Browser進(jìn)程(HTTP請(qǐng)求過程)

1.1HTTP請(qǐng)求過程

域名解析

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

常見的web server產(chǎn)品有 apache、nginx、IIS、Lighttpd 等



拿到域名對(duì)應(yīng)的IP地址之后，瀏覽器會(huì)以一個(gè)隨機(jī)端口（1024 < 端口 < 65535）向服務(wù)器的Web server 80端口發(fā)起TCP的連接請(qǐng)求。


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



?三次握手：



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


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


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

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

服務(wù)器端響應(yīng)http請(qǐng)求,瀏覽器得到html代碼

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

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

HTTP與HTTPS的區(qū)別：

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

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

HTTP 標(biāo)準(zhǔn)端口是80 ，而 HTTPS 的標(biāo)準(zhǔn)端口是443

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

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

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

1.4Renderer進(jìn)程(瀏覽器渲染進(jìn)程)

線程:線程包含在每個(gè)進(jìn)程內(nèi),線程是cpu調(diào)度的最小單位（線程是建立在進(jìn)程的基礎(chǔ)上的一次程序運(yùn)行單位，一個(gè)進(jìn)程中可以有多個(gè)線程）;

GUI 渲染線程

JavaScript引擎線程

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

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

異步http請(qǐng)求線程(宏任務(wù)(異步任務(wù)))

1.4.1GUI 渲染線程

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

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

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

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

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

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

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

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

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

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

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


1.4.2宏任務(wù)與微任務(wù)

宏任務(wù)

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

setTimeout

setInterval

setImmediate

requestAnimationFrame

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

異步http請(qǐng)求線程(宏任務(wù)(異步任務(wù)))

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

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

微任務(wù)(異步任務(wù))

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

Promise.then() catch() finally(),一旦一個(gè)pormise有了結(jié)果,回調(diào)產(chǎn)生一個(gè)微任務(wù)

process.nextTick

MutationObserver

參考

淺析瀏覽器渲染原理

完整的http流程

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105830.html

相關(guān)文章

  • 從瀏覽器多進(jìn)程到JS單線程，JS運(yùn)行機(jī)制最全面的一次梳理

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

    wanghui 評(píng)論0 收藏0

  • 前端面試--瀏覽器

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

    bigdevil_s 評(píng)論0 收藏0

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

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

    Half 評(píng)論0 收藏0

  • 深入理解JavaScript運(yùn)行機(jī)制

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

    phodal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<