很熟悉的標(biāo)題，總結(jié)一下自己的理解各谚，歡迎各位同行賜教＝艉丁：）
總結(jié)依據(jù)webkit技術(shù)內(nèi)幕和http權(quán)威指南兩書(shū)
一：輸入url,url的組成，有什么用?
通常最簡(jiǎn)單的url昌渤，就像這樣：http://www.reibang.com/赴穗，這串url就包含方案（就是通信協(xié)議，常見(jiàn)的http,https）膀息，服務(wù)器地址（www.reibang.com）望抽，端口號(hào)（http協(xié)議默認(rèn)是80端口，https協(xié)議默認(rèn)是443端口履婉，https就是加密的http協(xié)議煤篙，就是在http和TCP之間加了一層TSL或者SSL的安全層），資源（默認(rèn)是index.html）毁腿。
二：通過(guò)url解析出ip地址（到了我們常說(shuō)的DNS域名解析了）
1.我們來(lái)看第一次訪問(wèn)某個(gè)站點(diǎn)的時(shí)候要做什么辑奈？
如上所訴苛茂，url解析出了服務(wù)器域名，現(xiàn)在要將域名解析出ip地址鸠窗，就要請(qǐng)求域名服務(wù)器來(lái)解析ip妓羊，比如www.reibang.com.這個(gè)域名，后面多了一個(gè)點(diǎn)稍计，這個(gè)點(diǎn)就表示公網(wǎng)躁绸，通常是省略的，域名解析就是從右向左開(kāi)始解析臣嚣，解析.域->com域->jianshu.com域->www.reibang.com域這樣就拿到ip地址（其中的查找過(guò)程也是很復(fù)雜的净刮，這里我們只概括），如下解析過(guò)程：
用戶發(fā)起請(qǐng)求->操作系統(tǒng)把域名發(fā)送給本地區(qū)的域名服務(wù)器->有就解析返回ip硅则，然后結(jié)束淹父；
用戶發(fā)起請(qǐng)求->操作系統(tǒng)把域名發(fā)送給本地區(qū)的域名服務(wù)器->沒(méi)有->到Root Server的域名服務(wù)器請(qǐng)求解析->返回一個(gè)主域名（.com）的服務(wù)器地址地址->本地的域名服務(wù)器再向主域名服務(wù)器發(fā)起請(qǐng)求->返回Name Server域名服務(wù)器地址（jianshu.com）->接下來(lái)的解析就由域名提供商的服務(wù)器來(lái)解析->Name Server域名服務(wù)器查詢存儲(chǔ)的域名和ip的映射關(guān)系表->返回ip地址和一個(gè)過(guò)期時(shí)間，根據(jù)這個(gè)時(shí)間緩存到本地怎虫，解析結(jié)束暑认。
2.第二次再訪問(wèn)同樣站點(diǎn)的時(shí)候要做什么？
通常第一次訪問(wèn)完成之后大审，瀏覽器會(huì)將域名解析的映射緩存到本地蘸际，下次再訪問(wèn)該站點(diǎn)的時(shí)候，會(huì)先從瀏覽器的緩存中查看有沒(méi)有這個(gè)域名被解析過(guò)得ip地址徒扶，有沒(méi)有過(guò)期等捡鱼，如果有這個(gè)ip而且沒(méi)有過(guò)期，解析過(guò)程就結(jié)束酷愧。如果瀏覽器的緩存中沒(méi)有，瀏覽器就會(huì)查找操作系統(tǒng)的緩存中是否有對(duì)應(yīng)域名的ip地址（操作系統(tǒng)的域名解析也有一個(gè)過(guò)程的缠诅，大家可以自行搜索）溶浴。
三：ip地址解析完成之后，就開(kāi)始發(fā)請(qǐng)求
前面通過(guò)url解析出方案管引，端口號(hào)士败，域名服務(wù)器解析出ip地址，此時(shí)瀏覽器發(fā)起到122.228.25.221端口80的TCP連接褥伴，在建立連接之前瀏覽器和服務(wù)器會(huì)進(jìn)行三次握手：
第一次：瀏覽器向服務(wù)器發(fā)送請(qǐng)求（SYN=1）,等待服務(wù)器確認(rèn)谅将；
第二次：服務(wù)器收到請(qǐng)求并確認(rèn)，回復(fù)一個(gè)指令（SYN=1重慢，ACK=1）饥臂；
第三次：客戶端收到服務(wù)器的回復(fù)指令，并返回確認(rèn)（ACK=1）似踱；
1.首先瀏覽器發(fā)送連接請(qǐng)求報(bào)文隅熙，2.服務(wù)器接受連接后回復(fù)ACK報(bào)文稽煤，并為這次連接分配資源。3.瀏覽器接收到ACK報(bào)文后也向服務(wù)器發(fā)生ACK報(bào)文囚戚，并分配資源酵熙，這樣TCP連接就建立了，開(kāi)始數(shù)據(jù)傳輸驰坊。瀏覽器向服務(wù)器發(fā)送http的請(qǐng)求報(bào)文匾二，瀏覽器從服務(wù)器讀取響應(yīng)報(bào)文，然后瀏覽器關(guān)閉連接拳芙。
綜合前兩個(gè)的過(guò)程大致如下圖：
四：服務(wù)器返回html文檔之后察藐，瀏覽器的渲染引擎開(kāi)始dom解析過(guò)程（構(gòu)建DOM樹(shù)->渲染樹(shù)（Render tree）->布局render樹(shù)->繪制render樹(shù)）
1.通過(guò)網(wǎng)絡(luò)請(qǐng)求拿到html文檔之后，渲染引擎會(huì)調(diào)用html解析器開(kāi)始解析html态鳖，將html的標(biāo)簽解析成dom樹(shù)转培，如果遇到靜態(tài)資源，link標(biāo)簽則去請(qǐng)求相應(yīng)的資源浆竭，遇到script標(biāo)簽就會(huì)調(diào)用js引擎解釋并執(zhí)行（全局執(zhí)行js代碼的時(shí)候浸须，dom樹(shù)是禁止被訪問(wèn)的，因?yàn)閖s也可以操作dom結(jié)構(gòu)邦泄，此時(shí)dom樹(shù)并沒(méi)有創(chuàng)建完成删窒，所以js我們大都建議放在body元素之后（因?yàn)橛行﹋s執(zhí)行期間可能會(huì)很耗時(shí)），這樣就不會(huì)阻止其他資源的下載）顺囊。
解析dom樹(shù)的過(guò)程：通過(guò)網(wǎng)絡(luò)請(qǐng)求獲取的html網(wǎng)頁(yè)或資源從字節(jié)流解碼成字符流肌索，然后通過(guò)詞法分析器解析成詞語(yǔ)，之后經(jīng)過(guò)語(yǔ)法分析器構(gòu)建成節(jié)點(diǎn)特碳，最后這些節(jié)點(diǎn)組成一顆dom樹(shù)诚亚；（當(dāng)dom樹(shù)構(gòu)建完成之后，webkit會(huì)觸發(fā)DOMContentLoaded事件午乓，jquery的dom ready源碼實(shí)現(xiàn)也用到這個(gè)事件站宗，當(dāng)所有資源全都加載完畢之后會(huì)觸發(fā)onload事件）
2.dom樹(shù)解析完成之后，渲染引擎調(diào)用css解釋器根據(jù)css規(guī)則為每個(gè)dom樹(shù)節(jié)點(diǎn)計(jì)算css樣式信息益愈，構(gòu)建渲染樹(shù)（Render tree）梢灭；
render tree的過(guò)程：渲染引擎調(diào)用css解釋器，根據(jù)css規(guī)則（解析外部或者內(nèi)部引用額樣式表）蒸其，解析出樣式信息敏释，構(gòu)建render tree，渲染樹(shù)會(huì)忽略掉不需要被渲染的元素（display:none,head,meta...）摸袁；
3.布局樹(shù)（render layer）
構(gòu)建render tree之后钥顽，每個(gè)元素并不知道自己的大小顏色等樣式和位置信息，渲染引擎根據(jù)包含塊和盒模型來(lái)計(jì)算元素的大小位置等信息靠汁，這就是布局計(jì)算（排版）耳鸯。布局計(jì)算是一個(gè)遞歸過(guò)程：一個(gè)節(jié)點(diǎn)的大小要根據(jù)子節(jié)點(diǎn)的位置大小來(lái)計(jì)算湿蛔，一旦布局發(fā)生變化，就要重新繪制县爬，渲染效率就會(huì)降低阳啥，通常網(wǎng)頁(yè)性能瓶頸大都是頻繁的dom操作造成的，現(xiàn)在react框架的diff算法财喳，建立虛擬dom對(duì)比上一次的dom察迟，只繪制發(fā)生改變的那部分，大大提升性能耳高。
4.繪制render樹(shù)
渲染引擎開(kāi)始繪制圖像（繪制這部分很復(fù)雜扎瓶，不說(shuō)了，你猜我知道不知道Ｃ谇埂）
