寫(xiě)在前面：
如何使用瀏覽器大家都不需要教鼻吮，但是問(wèn)到具體到底是怎么工作的呢育苟？那就很懵了。
如果要完整地講椎木，這還得從最開(kāi)始我們輸入U(xiǎn)RL開(kāi)始講违柏，這里涉及到電容、電路香椎、CPU內(nèi)部處理等等等漱竖，頭禿。所以本文就簡(jiǎn)單理一下瀏覽器是怎么工作的畜伐，本胖也是一知半解馍惹，全當(dāng)做個(gè)了解，后面學(xué)習(xí)過(guò)程中慢慢完善就好。
使用瀏覽器上網(wǎng)讼积，通常有以下幾個(gè)步驟：
一肥照、輸入U(xiǎn)RL
- 使用鍵盤(pán)、觸屏等方式輸入U(xiǎn)RL勤众，這里就需要硬件與CPU的連接舆绎；
- 既然與CPU連接了，第二步就是CPU內(nèi)部處理信號(hào)们颜；
- CPU處理完吕朵，將信號(hào)傳送到操作系統(tǒng)；
- 操作系統(tǒng)GUI將輸入事件傳遞到瀏覽器窥突。
這一步輸入U(xiǎn)RL涉及到了計(jì)算機(jī)體系結(jié)構(gòu)努溃、計(jì)算機(jī)組成等專(zhuān)業(yè)知識(shí)，本胖已經(jīng)沒(méi)幾根頭發(fā)了就不在這里禿頭了阻问。
二梧税、瀏覽器發(fā)送數(shù)據(jù)到網(wǎng)卡
這里需要注意，
瀏覽器和瀏覽器內(nèi)核是不一樣的称近。
瀏覽器指Firefox第队、Chrome等，瀏覽器內(nèi)核指的是Trident刨秆、Gecko凳谦、Presto等。
瀏覽器負(fù)責(zé)GUI以及跨平臺(tái)工作（例如網(wǎng)絡(luò)連接等）衡未，而瀏覽器內(nèi)核負(fù)責(zé)解釋網(wǎng)頁(yè)語(yǔ)法并渲染/顯示網(wǎng)頁(yè)尸执。
- 輸入U(xiǎn)RL并按下回車(chē)鍵并且瀏覽器檢查URL完成后，調(diào)用瀏覽器內(nèi)核中相應(yīng)方法缓醋；
- 瀏覽器內(nèi)核首先擦看緩存如失，然后設(shè)置HTTP信息，再調(diào)用不同平臺(tái)下網(wǎng)絡(luò)請(qǐng)求的方法送粱；
- 發(fā)送HTTP請(qǐng)求褪贵。首先DNS查詢(xún)IP，得到IP地址之后葫督，通過(guò)Socket發(fā)送數(shù)據(jù)。
這里涉及到計(jì)算機(jī)網(wǎng)絡(luò)的知識(shí)板惑，具體底層網(wǎng)絡(luò)協(xié)議的例子橄镜，等之后寫(xiě)到流量分析題的時(shí)候再提一下吧。
三冯乘、本機(jī)網(wǎng)卡發(fā)送數(shù)據(jù)到服務(wù)器
- 瀏覽器內(nèi)核現(xiàn)在是完事兒了洽胶，這請(qǐng)求得出去才行吧，那就輪到了網(wǎng)絡(luò)適配器工作了唄；
- 通俗點(diǎn)姊氓，網(wǎng)絡(luò)適配器就是網(wǎng)卡丐怯。你有了網(wǎng)卡沒(méi)網(wǎng)咋行，那是不是還得有路由的活兒翔横，那就給安排上读跷；
- 家里路由工作完了，數(shù)據(jù)這就到了運(yùn)營(yíng)商網(wǎng)絡(luò)里去了禾唁，傳啊傳就傳到了服務(wù)器所在的IDC機(jī)房效览，進(jìn)入IDC內(nèi)網(wǎng)，反正得進(jìn)到服務(wù)器網(wǎng)卡里面荡短，具體咋整我也不清楚丐枉。
網(wǎng)絡(luò)工程真的不學(xué)拉網(wǎng)線啊QAQ - 到了網(wǎng)卡里，那就得去服務(wù)器端的CPU轉(zhuǎn)轉(zhuǎn)才行吖掘托，這樣這一段也差不多完成了瘦锹。
神奇的數(shù)據(jù)旅程，涉及到計(jì)算機(jī)網(wǎng)絡(luò)闪盔、無(wú)線通信等內(nèi)容弯院，我也搞不太清，先大概知道個(gè)過(guò)程吧锭沟。
四抽兆、服務(wù)器處理接收到的數(shù)據(jù)
- 負(fù)載均衡。將請(qǐng)求分配到多個(gè)應(yīng)用服務(wù)器中族淮，可以防攻擊辫红；
- 反向代理。這貨能理解HTTP協(xié)議祝辣，能做應(yīng)用層的分流策略贴妻，能監(jiān)控后端服務(wù)是否異常等等，就差能上天了hhh蝙斜；
- 進(jìn)入服務(wù)器中的Web Server名惩，處理HTTP請(qǐng)求。常見(jiàn)的Web Server有Apache孕荠、Tomcat等娩鹉。
還有一些步驟，寫(xiě)不動(dòng)了...【真的很頭禿啊稚伍，摔】
五弯予、瀏覽器渲染頁(yè)面
這個(gè)是本文重點(diǎn)要講的內(nèi)容，在后面詳細(xì)寫(xiě)个曙。
六锈嫩、瀏覽器展現(xiàn)頁(yè)面
瀏覽器把頁(yè)面渲染完之后，就要通過(guò)硬件把它展現(xiàn)在屏幕上，這里我是真的一點(diǎn)都搞不拎清了呼寸，就不寫(xiě)了艳汽。
前面就是一個(gè)大概的從我們輸入U(xiǎn)RL到得到想要的信息的過(guò)程，下面我們從瀏覽器內(nèi)部來(lái)看看对雪，到底它干了啥河狐。
先導(dǎo)
CPU，中央處理器慌植。解釋計(jì)算機(jī)指令及處理計(jì)算機(jī)軟件中的數(shù)據(jù)甚牲；
GPU，圖形處理器蝶柿∏唬可同時(shí)跨多個(gè)核心遥赚，處理簡(jiǎn)單任務(wù)垄开；
線程恰响，操作系統(tǒng)能夠運(yùn)算調(diào)度的最小單位；
進(jìn)程芙扎，程序的基本執(zhí)行實(shí)體星岗，是系統(tǒng)進(jìn)行資源分配和調(diào)度的基本單位。
瀏覽器結(jié)構(gòu)
不同的架構(gòu)是實(shí)現(xiàn)細(xì)節(jié)上的不同戒洼，如何構(gòu)建Web瀏覽器并沒(méi)有標(biāo)準(zhǔn)的規(guī)范俏橘。
本文以Chrome為例，展開(kāi)介紹圈浇。
Chrome多進(jìn)程架構(gòu)
瀏覽器進(jìn)程（Browser Process）：包括用戶(hù)界面寥掐，并且處理用戶(hù)不可見(jiàn)的操作，例如網(wǎng)絡(luò)請(qǐng)求磷蜀、文件訪問(wèn)等召耘；
渲染進(jìn)程（Renderer Process）：顯示渲染引擎解析出來(lái)的請(qǐng)求內(nèi)容；
插件進(jìn)程（Plugin Process）：控制顯示網(wǎng)站所使用的所有插件褐隆，例如Flash等污它；
GPU進(jìn)程：獨(dú)立于其他進(jìn)程處理GPU任務(wù)，處理來(lái)自多個(gè)應(yīng)用程序的請(qǐng)求庶弃，并繪制在同一頁(yè)面中衫贬；
其他進(jìn)程（Utility Process）：各司其職吧。
導(dǎo)航
這一部分指的是用戶(hù)請(qǐng)求網(wǎng)站以及瀏覽器準(zhǔn)備呈現(xiàn)頁(yè)面的部分歇攻，在參考文章里面固惯，作者稱(chēng)之為導(dǎo)航，我們也可以理解為進(jìn)行一次網(wǎng)頁(yè)訪問(wèn)的過(guò)程掉伏。
看完參考文章缝呕，我覺(jué)得寫(xiě)得非常的通俗易懂，我再轉(zhuǎn)述過(guò)來(lái)差不多就是翻譯一下了斧散，看官們可以自行戳文末參考的第二個(gè)鏈接去看哦~
這里列一個(gè)大致流程：
- UI線程詢(xún)問(wèn)地址欄部分輸入的是URL還是搜索查詢(xún)供常。（這個(gè)操作看不明白，可以自己打開(kāi)Chrome試一下鸡捐，在地址欄輸入U(xiǎn)RL和直接搜索是不一樣的）
- 按下回車(chē)之后栈暇，UI線程啟動(dòng)網(wǎng)絡(luò)調(diào)用獲取相應(yīng)站點(diǎn)內(nèi)容，網(wǎng)絡(luò)線程使用相應(yīng)協(xié)議干自己該干的事兒箍镜；
- 網(wǎng)絡(luò)線程查看數(shù)據(jù)類(lèi)型源祈，將數(shù)據(jù)傳遞給相應(yīng)進(jìn)程；
- 返回?cái)?shù)據(jù)就緒后色迂，UI線程查找渲染器進(jìn)程渲染網(wǎng)頁(yè)香缺；
- 瀏覽器發(fā)現(xiàn)渲染器進(jìn)程已開(kāi)始，導(dǎo)航就完成歇僧，接下來(lái)就開(kāi)始文檔加載图张。
瀏覽器渲染頁(yè)面
Chrome的渲染引擎使用的是Blink，是WebKit的一個(gè)分支诈悍。
渲染器進(jìn)程主要是講HTML祸轮、CSS、和JavaScript轉(zhuǎn)換為用戶(hù)可以與之交互的網(wǎng)頁(yè)侥钳。
渲染和解析
先來(lái)認(rèn)識(shí)一下單詞：
Parser：解析器
Attachment：附件
Layout：布局
- HTML文件加載后适袜，經(jīng)HTML解析器解析之后，開(kāi)始構(gòu)建DOM Tree舷夺；
- 樣式表文檔被加載后苦酱，經(jīng)CSS解析器解析后，開(kāi)始構(gòu)建樣式規(guī)則冕房，也是CSS Rule Tree躏啰；
- JS腳本文件加載之后，再一起構(gòu)建Render Tree耙册；
- 最后繪制網(wǎng)頁(yè)畫(huà)面给僵，顯示網(wǎng)頁(yè)。
后面還沒(méi)寫(xiě)完详拙，今天有點(diǎn)開(kāi)心激動(dòng)過(guò)頭了帝际，明天繼續(xù)補(bǔ)hhh
參考：
https://developers.google.com/web/updates/2018/09/inside-browser-part1
https://developers.google.com/web/updates/2018/09/inside-browser-part2
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_browser_high_level_structure
