1、輸入網(wǎng)址
????????當(dāng)你開始輸入網(wǎng)址比如www.cnblogs.com時(shí)游覽器就可以在書簽或者歷史記錄里面去搜索相關(guān)的網(wǎng)址推薦給你幌绍。
2邑贴、游覽器查找域名的IP地址
? ??????① 請求發(fā)起后恬吕，游覽器首先會解析這個(gè)域名，首先它會查看本地硬盤的 hosts 文件遥诉，看看其中有沒有和這個(gè)域名對應(yīng)的規(guī)則拇泣，如果有的話就直接使用 hosts 文件里面的 ip 地址。
????????② 如果在本地的 hosts 文件沒有能夠找到對應(yīng)的 ip 地址矮锈，瀏覽器會發(fā)出一個(gè) DNS請求到本地DNS(域名分布系統(tǒng))服務(wù)器 霉翔。本地DNS服務(wù)器一般都是你的網(wǎng)絡(luò)接入服務(wù)器商提供，比如中國電信苞笨，中國移動债朵。
????????③查詢你輸入的網(wǎng)址的DNS請求到達(dá)本地DNS服務(wù)器之后，本地DNS服務(wù)器會首先查詢它的緩存記錄瀑凝，如果緩存中有此條記錄序芦，就可以直接返回結(jié)果，此過程是遞歸的方式進(jìn)行查詢粤咪。如果沒有谚中，本地DNS服務(wù)器還要向DNS根服務(wù)器進(jìn)行查詢
????????④根DNS服務(wù)器沒有記錄具體的域名和IP地址的對應(yīng)關(guān)系，而是告訴本地DNS服務(wù)器，你可以到域服務(wù)器上去繼續(xù)查詢宪塔，并給出域服務(wù)器的地址磁奖。這種過程是迭代的過程
????????⑤本地DNS服務(wù)器繼續(xù)向域服務(wù)器發(fā)出請求，在這個(gè)例子中蝌麸，請求的對象是.com域服務(wù)器点寥。.com域服務(wù)器收到請求之后艾疟，也不會直接返回域名和IP地址的對應(yīng)關(guān)系来吩，而是告訴本地DNS服務(wù)器，你的域名的解析服務(wù)器的地址
????????⑥最后蔽莱，本地DNS服務(wù)器向域名的解析服務(wù)器發(fā)出請求弟疆，這時(shí)就能收到一個(gè)域名和IP地址對應(yīng)關(guān)系，本地DNS服務(wù)器不僅要把IP地址返回給用戶電腦盗冷，還要把這個(gè)對應(yīng)關(guān)系保存在緩存中怠苔，以備下次別的用戶查詢時(shí)，可以直接返回結(jié)果仪糖，加快網(wǎng)絡(luò)訪問柑司。
3、建立TCP鏈接
? ??????在拿到域名對應(yīng)的IP地址后锅劝，會以隨機(jī)端口（1024~~65535）向WEB服務(wù)器程序80端口發(fā)起TCP的連接請求攒驰，這個(gè)連接請求進(jìn)入到內(nèi)核的TCP/IP協(xié)議棧（用于識別該連接請求，解封包故爵，一層一層的剝開）玻粪，還有可能要經(jīng)過Netfilter防火墻（屬于內(nèi)核的模塊）的過濾，最終到達(dá)WEB程序诬垂，最終建立了TCP/IP的連接劲室，對于客戶端與服務(wù)器的TCP鏈接，必然要說的就是『三次握手』结窘。
????????客戶端發(fā)送一個(gè)帶有SYN標(biāo)志的數(shù)據(jù)包給服務(wù)端很洋，服務(wù)端收到后，回傳一個(gè)帶有SYN/ACK標(biāo)志的數(shù)據(jù)包以示傳達(dá)確認(rèn)信息隧枫，最后客戶端再回傳一個(gè)帶ACK標(biāo)志的數(shù)據(jù)包喉磁，代表握手結(jié)束，連接成功悠垛。
????????通俗化之后就是：
????????客戶端：老弟我要跟你鏈接
????????服務(wù)端：好的线定，同意了
????????客戶端：好嘞
4、游覽器向WEB服務(wù)器發(fā)起Http請求
????????建立TCP連接之后确买，發(fā)起HTTP請求斤讥，請求一般分為三部分
????????請求方法URI協(xié)議/版本
????????請求頭(Request Header)
????????請求正文
????????下面是一個(gè)完整的請求：
5、服務(wù)器端處理
????????服務(wù)器端收到請求后的由web服務(wù)器（準(zhǔn)確說應(yīng)該是http服務(wù)器）處理請求，諸如Apache芭商、Ngnix派草、IIS等。web服務(wù)器解析用戶請求铛楣，知道了需要調(diào)度哪些資源文件近迁，再通過相應(yīng)的這些資源文件處理用戶請求和參數(shù)，并調(diào)用數(shù)據(jù)庫信息簸州，最后將結(jié)果通過web服務(wù)器返回給瀏覽器客戶端鉴竭。
6、關(guān)閉TCP鏈接
????????為了避免服務(wù)器與客戶端雙方的資源占用和損耗岸浑，當(dāng)雙方?jīng)]有請求或響應(yīng)傳遞時(shí)搏存，任意一方都可以發(fā)起關(guān)閉請求。與創(chuàng)建TCP連接的3次握手類似矢洲，關(guān)閉TCP連接璧眠，需要4次握手。
????????上圖可以通俗化：
????????客戶端：老弟读虏，我這邊沒數(shù)據(jù)要傳了责静，咱們關(guān)閉鏈接吧
????????服務(wù)端：好的，接收到了盖桥，我看看我這邊還有沒有要傳的
????????服務(wù)端：我這邊也沒有了灾螃，關(guān)閉吧
????????客戶端：好嘞
7、游覽器解析資源
????????對于獲取到的HTML葱轩、CSS睦焕、JS、圖片等等資源靴拱。
????????瀏覽器通過解析HTML垃喊，生成DOM樹，解析CSS袜炕，生成CSS規(guī)則樹本谜，然后通過DOM樹和CSS規(guī)則樹生成渲染樹。渲染樹與DOM樹不同偎窘，渲染樹中并沒有head乌助、display為none等不必顯示的節(jié)點(diǎn)。
????????在解析CSS的同時(shí)陌知，可以繼續(xù)加載解析HTML他托，但在解析執(zhí)行JS腳本時(shí)，會停止解析后續(xù)HTML仆葡，這就會出現(xiàn)阻塞問題赏参，關(guān)于JS阻塞相關(guān)問題，這里不過多闡述,后面會單獨(dú)開篇講解。
8把篓、游覽器布局渲染
????????根據(jù)渲染樹布局纫溃，計(jì)算CSS樣式，即每個(gè)節(jié)點(diǎn)在頁面中的大小和位置等幾何信息韧掩。HTML默認(rèn)是流式布局的紊浩，CSS和js會打破這種布局，改變DOM的外觀樣式以及大小和位置疗锐。這時(shí)就要提到兩個(gè)重要概念：repaint和reflow坊谁。
????????repaint：屏幕的一部分重畫，不影響整體布局窒悔，比如某個(gè)CSS的背景色變了呜袁，但元素的幾何尺寸和位置不變敌买。
????????reflow： 意味著元件的幾何尺寸變了简珠，我們需要重新驗(yàn)證并計(jì)算渲染樹。是渲染樹的一部分或全部發(fā)生了變化虹钮。這就是Reflow聋庵，或是Layout。
????????有些情況下芙粱，比如修改了元素的樣式祭玉，瀏覽器并不會立刻 reflow 或 repaint 一次，而是會把這樣的操作積攢一批春畔，然后做一次 reflow脱货，這又叫異步 reflow 或增量異步 reflow。
????????有些情況下律姨，比如 resize 窗口振峻，改變了頁面默認(rèn)的字體等。對于這些操作择份，瀏覽器會馬上進(jìn)行 reflow扣孟。
