描述一下從輸入URL到瀏覽器頁面渲染的過程

以下內(nèi)容會根據(jù)本人水平的變化不定期更新答案，目標(biāo)是寫出一個完整的全方位的答案

目錄

1. HSTS 和 dns解析
2. Rap協(xié)議解析MAC地址
3. 瀏覽器的強緩存或者協(xié)商緩存的觸發(fā)
4. 瀏覽器進(jìn)程對請求返回的數(shù)據(jù)的解析
5. 頁面的渲染

從輸入url到HSTS

首先，我們在url地址欄開始輸入時，瀏覽器根據(jù)你的輸入動態(tài)匹配是否對地址有緩存，如下圖:

image

然后，假設(shè)當(dāng)前我們就是要輸入baidu的地址，直接回車即可。這里需要注意的是，我們直接baidu.com的形式訪問，發(fā)起的是http請求，而如果啟用了HSTS，那么瀏覽器會自動幫你重定向，然后把請求協(xié)議改為https。如圖:

image

而如果我們沒有啟用HSTS，而是直接請求站點的話，那么服務(wù)器會返回一個302/301的狀態(tài)碼然后要求客戶端重定向到443端口，然后重新以https向服務(wù)器發(fā)起請求。

DNS解析獲取ip地址

根據(jù)URL，會開始按照下面的流程查詢，獲取域名對應(yīng)的IP地址

1. 首先會查詢本機(jī)的host文件，如果獲取到ip則直接返回，如果沒有則繼續(xù)往下查找
2. 向本地DNS緩存查詢，如果查詢到了則返回，沒有則開始向DNS服務(wù)器查詢，而DNS服務(wù)器的ip地址在我們鏈接了網(wǎng)絡(luò)之后本機(jī)就會有這個地址了。
3. 如果DNS服務(wù)器中沒有查詢到，那么就會開啟一個遞歸查詢

1. 先向.root服務(wù)器查詢，.root會返回 .com的ip地址
2. 然后向.com服務(wù)器查詢，.com 會返回 baidu.com的ip地址
3. 然后向baidu.com服務(wù)器查詢,baidu.com會返回 www.baidu.com的ip地址
4. 然后www.baidu.com會返回ip地址，然后本機(jī)會把ip地址緩存到本地

上圖幫助理解:

image

RAP協(xié)議解析獲取MAC地址

因為我們知道，機(jī)器之間的通訊實際上是網(wǎng)卡之間的通訊，而網(wǎng)卡之間通訊實際上是通過MAC地址進(jìn)行通訊的。而ARP協(xié)議就是用來通過IP地址解析出MAC地址的

1. 主機(jī)回向本機(jī)緩存的ARP協(xié)議表查詢是否有對應(yīng)的MAC地址，如果沒有則會向網(wǎng)絡(luò)發(fā)起一個廣播（Rap Request），網(wǎng)絡(luò)上的其他主機(jī)不會作出回應(yīng)，只有目標(biāo)地址的主機(jī)會以單播的形式作出回應(yīng)，并且?guī)献约旱?strong>ip和MAC。瀏覽器會把這個IP和MAC緩存起來，同樣的目標(biāo)主機(jī)也會把我們的IP和MAC緩存起來存放在ARP緩存表里面。在接下來的一段時間內(nèi)，將不會再重新請求(TTL)
2. 最后會把這個MAC地址寫進(jìn)請求幀中

image

瀏覽器的強緩存或者協(xié)商緩存的觸發(fā)

在我們一切就緒之后，我們會開始向服務(wù)器發(fā)送請求。也就是所謂的瀏覽器和服務(wù)器之間的應(yīng)答，即瀏覽器向服務(wù)器發(fā)起一次HTTP請求，而在這一步中我們或瀏覽器本身會存在一種緩存機(jī)制

1. 強緩存
2. 協(xié)商緩存

在正式講解之前，我們先上一張圖。

image

而執(zhí)行強緩存和協(xié)商緩存，分別是通過不同的標(biāo)識符來判斷的。他們的執(zhí)行順序是

(Expires > Cache-Control > Etag/If-None-Match > Last-Modified/If-Modified-Since)

首先瀏覽器會先執(zhí)行強緩存，強緩存的過程是:

1. 首先瀏覽器會先查看緩存中的標(biāo)識符（Expires / Cache-Control）這兩個標(biāo)識符分別存的都是時間，不過有一些不同，Expires的值是一個具體的日期，而Cache-Control的值則是一個固定的時間例如Max-age。

2. 瀏覽器在獲取到了標(biāo)識符之后，判斷是否已經(jīng)過期，如果沒過期則直接返回數(shù)據(jù)，然后進(jìn)行下一步

2.1 而如果過期了，則向服務(wù)器發(fā)起http請求 (這個時候?qū)?zhí)行的是協(xié)商緩存)。然后一切順利的話，服務(wù)器會返回標(biāo)識符和數(shù)據(jù)，然后瀏覽器再把他們緩存起來
2.2 而如果緩存中沒有標(biāo)識符也沒有數(shù)據(jù)緩存，則瀏覽器也會直接向服務(wù)器發(fā)起http請求，之后也和上面一樣，把結(jié)果緩存起來。（第一次請求）

一切順利的話，會有以下的效果：

image

其中，from memory cache意思是緩存來自內(nèi)存, 如果是from disk cache 則標(biāo)識緩存來自硬盤

而如果強緩存失效也就是上面的2.1，那么瀏覽器會攜帶者標(biāo)識符，向服務(wù)器發(fā)起請求，服務(wù)器會根據(jù)瀏覽器攜帶過來的標(biāo)識符判斷是否使用緩存，而這個過程就是協(xié)商緩存

協(xié)商緩存會有以下情況:

1. 協(xié)商緩存生效，返回響應(yīng)碼304，瀏覽器根據(jù)304的響應(yīng)碼直接獲取緩存中的數(shù)據(jù)，并且把新的緩存標(biāo)識也緩存到瀏覽器緩存中。

   
   
   image

2. 協(xié)商緩存沒生效，則返回響應(yīng)碼200，并且返回請求的結(jié)果

   
   
   image

其實協(xié)商緩存的過程，請求都會發(fā)送到服務(wù)器。只是服務(wù)器會根據(jù)緩存標(biāo)識判斷數(shù)據(jù)是否已失效，如果失效了則重新進(jìn)行查詢，然后返回最新的數(shù)據(jù)，如果沒有失效，則通知瀏覽器直接取緩存中的數(shù)據(jù)。

協(xié)商緩存使用的標(biāo)識符主要是(Last-Modified/If-since-Modified 和 Etag/If-None-Match)

Last-Modified的值是服務(wù)器響應(yīng)請求時，返回該資源文件在服務(wù)器最后被修改的時間，在響應(yīng)報文中的字段是：

last-modified: Web, 20 Mar 2020 10:37:56 GTM

而瀏覽器再次發(fā)起請求得時候以If-Since-Modified的字段去攜帶這個值，并且返回后服務(wù)器。之后服務(wù)器會把這個值的時間拿去和文件的更新時間作對比。再按情況返回不同的響應(yīng)碼

而如果我們設(shè)置了Etag/If-None-Match。那么會優(yōu)先執(zhí)行這個標(biāo)識符，而這個標(biāo)識符的其實存儲的是文件的一個唯一標(biāo)識符，服務(wù)器會根據(jù)這個唯一標(biāo)識符是否一致去判斷文件是否有變更。

到這里瀏覽器的緩存就走完了。然后接下來，假設(shè)我們成功獲取到了服務(wù)器返回的數(shù)據(jù)。瀏覽器開始解析我們從網(wǎng)絡(luò)上請求下來的數(shù)據(jù)（假設(shè)是一個html文件）

瀏覽器進(jìn)程對請求返回的數(shù)據(jù)的解析

首先，瀏覽器的network thread 會根據(jù)響應(yīng)報文的Content-Type判斷響應(yīng)主體的媒體類型，如果返回的是一個HTML則會把數(shù)據(jù)交給Render process來進(jìn)行下一步的處理，而如果返回的是一個zip的文件或者其他，會把相關(guān)數(shù)據(jù)傳輸給下載管理器

與此同時。瀏覽器還會進(jìn)行Safe Browsing安全檢查，如果域名或者請求的內(nèi)容匹配到的是已知的惡意站點，那么瀏覽器會展示一個警告的頁面。除此之外網(wǎng)絡(luò)線程還會做CORB檢查，也就是跨域檢查（即對比Origin的域名和Acess-Control-Allow的值看是否是一致

假設(shè)我們獲取到的資源是一個HTML文件，然后瀏覽器會把HTML文件交給渲染進(jìn)程

渲染進(jìn)程的組成是:

• 一個主線程（main thread）
• 多個工作線程（work thread）
• 一個合成器線程（compositor thread）
• 多個光柵化線程（raster thread）

待續(xù)....