一、網(wǎng)站加載概述

面試過程中，常常遇到這樣一道面試題，輸入U(xiǎn)RL到頁(yè)面加載完畢，瀏覽器做了哪些工作？

首先輸入一個(gè)URL，你會(huì)看到瀏覽器上面的標(biāo)簽頁(yè)出現(xiàn)了一個(gè)loading圖標(biāo)，開始時(shí)是逆時(shí)針旋轉(zhuǎn)，接著順時(shí)針旋轉(zhuǎn)，當(dāng)前頁(yè)面消失，顯示我們常說的空白頁(yè)面，接著出現(xiàn)顯示我們請(qǐng)求的新頁(yè)面。此時(shí)如果網(wǎng)絡(luò)很差，你有可能看到短暫的DOM頁(yè)面，然后再看到渲染后的正常頁(yè)面，這是從表面看到的加載過程，實(shí)際瀏覽器做的要多得多。

為什么瀏覽器這么多戲呢？直接顯示不好嗎，當(dāng)然不行，就像喝粥，能直接吃米、喝水嗎？

在用戶輸入U(xiǎn)RL到頁(yè)面展示，瀏覽器要先向服務(wù)器獲取前端資源，然后再將服務(wù)器返回的字節(jié)流轉(zhuǎn)化成對(duì)應(yīng)的頁(yè)面，每一階段都需要瀏覽器對(duì)應(yīng)的能力進(jìn)行處理的。

作為前端開發(fā)，了解整個(gè)過程其實(shí)很重要，只有知道了瀏覽器加載頁(yè)面的整個(gè)過程，才能在開發(fā)中避免可能跳的坑，才能在發(fā)現(xiàn)問題后迅速定位問題，才能在性能優(yōu)化時(shí)提出更多的解決方案。

比如下面問題，看了文章相信你就知道了為什么了

• 為什么會(huì)存在空白頁(yè)面？(為了解決這個(gè)問題，各大廠都在實(shí)踐各種方案）

• 為什么js要在Dom后面引入

• 為什么有個(gè)頁(yè)面崩潰會(huì)導(dǎo)致多個(gè)頁(yè)面崩潰

• 瀏覽器的緩存策略是怎樣的？

• 為什么我們常常修改host就可以訪問對(duì)應(yīng)的域名

• 等等

二、瀏覽器的多進(jìn)程架構(gòu)

為了看懂下面的內(nèi)容，這里必須要了解下現(xiàn)代瀏覽器的多進(jìn)程架構(gòu)，進(jìn)程和線程的關(guān)系等知識(shí)點(diǎn)。

瀏覽器也是從單個(gè)進(jìn)程架構(gòu)一步步迭代到現(xiàn)代的多進(jìn)程架構(gòu)。

如上圖，我們可以看到線程和進(jìn)程的關(guān)系

• 通常一個(gè)程序?qū)嵗褪且粋€(gè)進(jìn)程，瀏覽器會(huì)為他分配內(nèi)存空間。

• 一個(gè)進(jìn)程間的數(shù)據(jù)是共享的，單線程就是一個(gè)進(jìn)程包含一個(gè)線程，一個(gè)線程處理所有的任務(wù)

• 多線程就是，一個(gè)進(jìn)程中包含多個(gè)線程可以同時(shí)執(zhí)行任務(wù)，共享數(shù)據(jù)和內(nèi)存

• 線程不能多帶帶存在，必須依附于進(jìn)程，一個(gè)線程失敗，會(huì)導(dǎo)致進(jìn)程執(zhí)行失敗，進(jìn)程銷毀，內(nèi)存會(huì)被立即回收。

1、進(jìn)程

下圖是我們打開一個(gè)掘金首頁(yè)后，再打開任務(wù)管理器，觀察發(fā)現(xiàn)，此時(shí)瀏覽器包括的進(jìn)程有很多，瀏覽器主進(jìn)程，GPU進(jìn)程，網(wǎng)絡(luò)進(jìn)程，存儲(chǔ)進(jìn)程，音頻進(jìn)程，渲染進(jìn)程，多個(gè)插件進(jìn)程。

這些進(jìn)程負(fù)責(zé)的功能如下：

渲染進(jìn)程是運(yùn)行在沙箱之中的，可以執(zhí)行js，但是不能獲取系統(tǒng)權(quán)限，和瀏覽器進(jìn)程通過IPC通訊。這是為了保證瀏覽器進(jìn)程的安全，鎖進(jìn)沙箱，即使有惡意代碼，也不能突破沙箱讀取或?qū)懭胂到y(tǒng)信息。

2、線程

通過上圖，我們已經(jīng)知道線程是不能獨(dú)立存在的，必須依附于進(jìn)程。這里我們主要關(guān)注下渲染進(jìn)程，因?yàn)樗闹饕ぷ骶褪牵和瓿身?yè)面的渲染和展示。

如圖，我們可以看到渲染進(jìn)程包括很多線程，除了圖上展示的，還有合成線程等，各有各的作用，具體內(nèi)容，我們將會(huì)在后面一章節(jié)，瀏覽器渲染原理分析中在來(lái)討論。

三、瀏覽器請(qǐng)求的具體流程

從用戶輸入域名到瀏覽器渲染頁(yè)面完成的過程，可以分為以下幾個(gè)部分：

• 1、輸入信息處理

• 2、網(wǎng)絡(luò)請(qǐng)求

• 3、服務(wù)器返回請(qǐng)求資源

• 4、瀏覽器渲染

這里每一步涉及到的知識(shí)都非常多，其中緩存也在每個(gè)階段占了很大比重，接著展開描述前三個(gè)階段：

1、地址欄輸入信息處理

當(dāng)輸入一個(gè)URL，瀏覽器會(huì)判斷輸入信息是檢索信息還是請(qǐng)求URL

• 如果是檢索的信息，就構(gòu)建請(qǐng)求搜索的URL，調(diào)用瀏覽器默認(rèn)的搜索引擎進(jìn)行檢索。

• 如果符合URL格式，瀏覽器主進(jìn)程就通過IPC通信機(jī)制將URL發(fā)送給網(wǎng)絡(luò)進(jìn)程。

2、網(wǎng)絡(luò)進(jìn)程發(fā)起網(wǎng)絡(luò)請(qǐng)求

1）網(wǎng)絡(luò)進(jìn)程首先會(huì)查找瀏覽器緩存，判斷緩存是否存在，是否過期

• 如果存在且不過期，就直接返回緩存信息。具體的緩存策略可以接著看下面的瀏覽器緩存策略

2）如果沒有緩存或過期，就開始進(jìn)行DNS解析

• DNS解析的過程也很復(fù)雜，最終目的就是拿到目標(biāo)主機(jī)的IP地址，具體的解析過程可以看下面的域名解析

3）建立http連接或https連接

• http通過三次握手建立連接

• https需要建立TLS連接，瀏覽器會(huì)驗(yàn)證網(wǎng)站的數(shù)字證書是否合法，是否到期，是否安全等，這里https有自己的一套認(rèn)證邏輯，我們重點(diǎn)不在這一塊。

• 這里兩個(gè)問題常被問到，不了解可以學(xué)習(xí)一下

• http和https的區(qū)別？

• 簡(jiǎn)述三次握手、四次揮手？

4）發(fā)送請(qǐng)求

• 網(wǎng)絡(luò)進(jìn)程會(huì)構(gòu)建http請(qǐng)求頭，向服務(wù)器發(fā)送實(shí)際請(qǐng)求

5）網(wǎng)絡(luò)傳輸，服務(wù)器處理，返回對(duì)應(yīng)的資源

• 請(qǐng)求從應(yīng)用層發(fā)出，經(jīng)過運(yùn)輸層、網(wǎng)絡(luò)層、物理層、數(shù)據(jù)鏈路層找到服務(wù)器，服務(wù)器拿到請(qǐng)求信息，返回對(duì)應(yīng)的資源

• 這里的服務(wù)器可能是代理服務(wù)器，也可能是CDN節(jié)點(diǎn)，會(huì)判斷當(dāng)前數(shù)據(jù)是否存在緩存，如果有緩存且有效，直接返回（具體看配置的緩存策略），否則才會(huì)從服務(wù)器獲取。

• 網(wǎng)絡(luò)傳輸數(shù)據(jù)也是很復(fù)雜的過程，具體可以看下面簡(jiǎn)單的介紹計(jì)算機(jī)網(wǎng)絡(luò)體系模型

3、服務(wù)器返回對(duì)應(yīng)資源

1）處理返回信息

• 瀏覽器接收到服務(wù)器返回的資源信息，網(wǎng)絡(luò)進(jìn)程首先會(huì)解析返回的頭信息，查看是否有Location字段，如果有的話，再次發(fā)起請(qǐng)求，很常見的就是請(qǐng)求http的站點(diǎn)，然后重定向到https。

• 如下圖我們輸入的是http://www.taobao.com/，接口返回307內(nèi)部重定向，然后瀏覽器再次進(jìn)行了請(qǐng)求https//www.taobao.com/

• 通過返回頭字段Content-Type判斷文件類型，如果其他類型，就調(diào)用不同的進(jìn)程處理，如果是html類型，繼續(xù)處理。

• 網(wǎng)絡(luò)進(jìn)程拿到返回的資源信息，會(huì)發(fā)送消息“提交導(dǎo)航”到瀏覽器主進(jìn)程，瀏覽器主進(jìn)程發(fā)送信息“提交文檔”，提醒渲染進(jìn)程準(zhǔn)備接收返回的資源信息

• 渲染進(jìn)程和網(wǎng)絡(luò)進(jìn)程構(gòu)建通道，接收資源信息，并發(fā)送消息“提交文檔”給瀏覽器主進(jìn)程，告訴瀏覽器主進(jìn)程我準(zhǔn)備好了，瀏覽器主進(jìn)程開始刷新頁(yè)面，url、安全等信息。

• 此時(shí)頁(yè)面將會(huì)觸發(fā)beforeunload事件，在頁(yè)面退出之前允許用戶選擇終止該流程（常應(yīng)用于表單提交頁(yè)面）。如果不監(jiān)控該方法，瀏覽器就直接替換當(dāng)前頁(yè)面。

• 然后在渲染線程繪制出頁(yè)面的之前，頁(yè)面將存在空白時(shí)間，這就是各個(gè)技術(shù)團(tuán)隊(duì)在攻克的技術(shù)點(diǎn)，怎樣讓空白時(shí)間最短，這個(gè)時(shí)間取決于當(dāng)前頁(yè)面渲染的時(shí)長(zhǎng)，那么我們還是要了解下瀏覽器是如何渲染服務(wù)器返回的資源。

8）四次揮手

資源傳輸完畢，斷開連接

四、多個(gè)Tab頁(yè)共用渲染進(jìn)程

我們打開任務(wù)管理器，看到如下圖所示

我們發(fā)現(xiàn)很多標(biāo)簽頁(yè)都是多帶帶的一個(gè)進(jìn)程，但是其中一些標(biāo)簽頁(yè)確是共用一個(gè)渲染進(jìn)程，為什么會(huì)這樣？

其實(shí)瀏覽器對(duì)于在當(dāng)前站點(diǎn)打開的新Tab頁(yè)面會(huì)做一些優(yōu)化，如果他們同源，且執(zhí)行環(huán)境相同，會(huì)直接復(fù)用當(dāng)前站點(diǎn)的渲染進(jìn)程。

這樣就可以提高渲染的性能，也能讓父窗口和子窗口建立關(guān)聯(lián)，但這樣也造成了一定的隱患

• 公用一個(gè)進(jìn)程，如果當(dāng)前進(jìn)程中的一個(gè)線程出現(xiàn)問題，當(dāng)前進(jìn)程就會(huì)崩潰，公用同一個(gè)進(jìn)程的頁(yè)面也會(huì)崩潰。

• 如果有惡意腳本就可以攻擊新打開的頁(yè)面，在新打開的頁(yè)面中我們可以通過window.opener獲取父頁(yè)面的操作權(quán)限

如果沒有關(guān)聯(lián)

如果有關(guān)聯(lián)

這就是我們現(xiàn)實(shí)中可能會(huì)遇到的一個(gè)頁(yè)面奔潰，其他同源站點(diǎn)全部退出的現(xiàn)象。

那么這種共同使用一個(gè)渲染進(jìn)程是如果出現(xiàn)的呢？在日常編碼中我們常常有這三種方式：

1、a標(biāo)簽

一般情況下，項(xiàng)目中我們跳轉(zhuǎn)采用a標(biāo)簽，如果調(diào)整的是同源頁(yè)面，會(huì)出現(xiàn)

<a href="http://www.baidu.com"></a> 復(fù)制代碼

該方法使用最新版的谷歌測(cè)試發(fā)現(xiàn)，在當(dāng)前頁(yè)面內(nèi)打開一個(gè)同源的站點(diǎn)，使用的是獨(dú)立的進(jìn)程，這和預(yù)期的不符合，后面會(huì)繼續(xù)測(cè)試看看。

但是一般情況下，我們可以給a標(biāo)簽加上屬性rel="noopener norefferrer"來(lái)保證不同頁(yè)面使用不同的進(jìn)程。

2、window.open

window.open("http://www.baidu.com") 復(fù)制代碼

使用window.open打開相同站點(diǎn)，肯定會(huì)出現(xiàn)使用同一個(gè)渲染進(jìn)程，如果要規(guī)避，就要增加如下代碼，去除兩者的關(guān)聯(lián)

let newWin = window.open("http://my.dome.com") newWin.opener = null 復(fù)制代碼

3、Iframe

頁(yè)面中采用iframe框架引入其他頁(yè)面，則iframe會(huì)獨(dú)立成輔助框架，有自己的渲染進(jìn)程，如果同源會(huì)采用同一個(gè)渲染進(jìn)程。

五、網(wǎng)絡(luò)請(qǐng)求

1、瀏覽器緩存策略

• 存儲(chǔ)策略

• 強(qiáng)緩存

• 協(xié)商緩存

瀏覽器的緩存策略，有助于提高網(wǎng)頁(yè)加載速度，減輕服務(wù)器壓力。

具體緩存的過程如圖：

詳細(xì)說明：

1、當(dāng)我們輸入url，瀏覽器會(huì)去查看自身是否有緩存，如果沒有緩存會(huì)直接請(qǐng)求服務(wù)器獲取資源，并緩存到瀏覽器一份，返回?cái)?shù)據(jù)會(huì)攜帶ETag字段和Last-Modified字段，狀態(tài)碼200 OK（from memory cache）,

其中ETag是文件計(jì)算的hash值，如果文件不發(fā)生改變，這個(gè)值不會(huì)變。Last-Modified是文件最后的修改時(shí)間，如果文件更新或者覆蓋就會(huì)顯示最新的時(shí)間

2、如果瀏覽器有緩存，此時(shí)檢查http的請(qǐng)求頭，看cache-control、expires字段，判斷是否過了緩存的有效期，如果沒有過有效期，則返回200狀態(tài)碼和對(duì)應(yīng)的緩存數(shù)據(jù)。

此時(shí)是強(qiáng)緩存

• expires是http1.0的定義，返回一個(gè)絕對(duì)的時(shí)間GMT，為過期時(shí)間。這就導(dǎo)致如果服務(wù)器時(shí)間和瀏覽器時(shí)間不一致，可能會(huì)使緩存失效。

• cache-control是http1.1的定義，可以定義的值有

• max-age=600 表示最長(zhǎng)有效期為600s

• no-cache 不走瀏覽器緩存，每次都去瀏覽器協(xié)商緩存

• no-store 每次都請(qǐng)求最新的資源

• private 私有，只能在用戶終端緩存，不能在cdn或代理服務(wù)器緩存

• public 公有，可以在所有節(jié)點(diǎn)緩存

• 兩者同時(shí)存在，cache-control優(yōu)先級(jí)高

3、如果瀏覽器緩存已過期，就攜帶請(qǐng)求頭字段If-None-Match和If-Modified-Since去服務(wù)器拉取資源，服務(wù)器看到這兩個(gè)字段，發(fā)現(xiàn)和當(dāng)前服務(wù)器資源一致，就直接返回緩存和狀態(tài)碼304。服務(wù)器一般會(huì)先驗(yàn)證If-None-Match/ETag，如果不變，再去驗(yàn)證If-Modified-Since/Last-Modified

其中If-Modified-Since就是之前返回的Last-Modified，If-None-Match就是之前返回的ETag

如果第一次請(qǐng)求，默認(rèn)沒有緩存，瀏覽器將會(huì)進(jìn)行緩存，瀏覽器緩存的都是派生文件， 比如css、js、img等不常變動(dòng)的文件，內(nèi)存緩存肯定比較小，所以會(huì)緩存一下js，頁(yè)面關(guān)閉就清空了，disk memory 會(huì)在的時(shí)間會(huì)久一點(diǎn)。

2、域名解析

DNS就是域名系統(tǒng)，作用是將域名解析成對(duì)應(yīng)的IP地址。具體的解析過程

• 1、輸入一個(gè)url，首先瀏覽器會(huì)對(duì)url進(jìn)行解析，取出主機(jī)名

• 2、接著查找瀏覽器自身的DNS緩存，查到返回對(duì)應(yīng)IP

• 3、沒有找到，在本機(jī)找Host文件是否有對(duì)應(yīng)的IP（host文件就是域名和ip的映射關(guān)系表），查到就返回IP

• 3、沒有的話，本地DNS服務(wù)器開始查找，向各級(jí)的DNS服務(wù)器發(fā)送查詢報(bào)文，獲取對(duì)應(yīng)的IP地址

在每次查找的過程中，瀏覽器，應(yīng)用程序，DNS服務(wù)器都會(huì)對(duì)域名進(jìn)行緩存，如果命中緩存，DNS會(huì)直接返回對(duì)應(yīng)的IP，沒有命中則繼續(xù)查找相關(guān)的域名服務(wù)器，定位IP

分析可知這個(gè)階段，我們能優(yōu)化的方法有限，常見的做法有：

• 1、在html文件增加DNS緩存標(biāo)簽

• 2、通過將域名解析到多個(gè)IP，做DNS的負(fù)載均衡

<link rel="dns-prefetch" href="//g.alicdn.com" /> 復(fù)制代碼

上面代碼，會(huì)預(yù)取g.test.com解析

<meta http-equiv="x-dns-prefetch-control" content="on"> 復(fù)制代碼

上面代碼，設(shè)置自動(dòng)開啟DNS解析功能

3、http請(qǐng)求過程

這里的網(wǎng)絡(luò)請(qǐng)求，我們默認(rèn)為http請(qǐng)求。

• 1、首先如果是第一次請(qǐng)求，域名經(jīng)過DNS解析拿到映射的IP

• 2、這里客戶端發(fā)送http報(bào)文給對(duì)應(yīng)的服務(wù)器，這個(gè)過程中要經(jīng)過應(yīng)用層、運(yùn)輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層和物理層對(duì)數(shù)據(jù)報(bào)的層層處理

• 3、經(jīng)過上一步的三次確認(rèn)，也就是客戶端和服務(wù)器（或代理服務(wù)器）進(jìn)行三次握手建立TCP連接

• 4、然后服務(wù)器返回對(duì)應(yīng)的資源給客戶端

• 5、如果是第二次及以上的請(qǐng)求，瀏覽器或服務(wù)器會(huì)通過http的header參數(shù)，判斷資源是否過期，如果沒有過期，則使用緩存，如果過期，就去服務(wù)器拿新的資源

4、五層計(jì)算機(jī)體系模型

第二步，這里客戶端發(fā)送http報(bào)文給對(duì)應(yīng)的服務(wù)器，具體的過程為：

• 1、首先應(yīng)用層提供了很多協(xié)議，包括：http、ftp、POP3、IMAP，這里瀏覽器使用的是http協(xié)議，首先瀏覽器會(huì)在應(yīng)用層，把請(qǐng)求的數(shù)據(jù)報(bào)按照http協(xié)議要求的格式，定義一系列請(qǐng)求的字段，推進(jìn)TCP套接字，等待運(yùn)輸層接收。

• 2、運(yùn)輸層主要的協(xié)議有：TCP和UDP，運(yùn)輸層拿到數(shù)據(jù)報(bào)以后，會(huì)先看是否和目的主機(jī)建立連接，如果沒有，則進(jìn)行三次握手，建立TCP連接。如果連接成功，會(huì)對(duì)數(shù)據(jù)報(bào)進(jìn)一步封裝，增加源主機(jī)端口號(hào)和目的主機(jī)端口號(hào)，進(jìn)行差錯(cuò)檢測(cè)，然后傳遞到網(wǎng)絡(luò)層。

• 3、網(wǎng)絡(luò)層主要協(xié)議有：IP協(xié)議，接收運(yùn)輸層的數(shù)據(jù)報(bào)，然后增加目的主機(jī)IP，封裝成一段段符合IP協(xié)議的IP數(shù)據(jù)報(bào)，經(jīng)過若干個(gè)路由到達(dá)數(shù)據(jù)鏈路層

• 4、數(shù)據(jù)鏈路層有ARP協(xié)議，可以通過IP地址解析目標(biāo)地址的mac地址，通過物理層轉(zhuǎn)發(fā)出去，到達(dá)目的局域網(wǎng)后，通過廣播，被目的主機(jī)接收

六、服務(wù)器處理階段

服務(wù)器獲取請(qǐng)求，協(xié)商緩存查看資源是否有變化，如果沒有變化返回緩存資源。

• CDN緩存

這里如果存在代理服務(wù)器或者CDN節(jié)點(diǎn)，那么相當(dāng)于增加了一個(gè)緩存節(jié)點(diǎn)，首先請(qǐng)求會(huì)轉(zhuǎn)發(fā)到最新的CDN節(jié)點(diǎn)，CDN節(jié)點(diǎn)收到請(qǐng)求后會(huì)判斷當(dāng)前資源是否過期cache-control，如果過期就回源請(qǐng)求最新的資源，如果沒有過期就返回緩存資源。

CDN的存在解決了跨地域請(qǐng)求的時(shí)延問題；對(duì)服務(wù)器壓力進(jìn)行了分流。

四次揮手：如果請(qǐng)求結(jié)束，服務(wù)器和客戶端進(jìn)行四次握手，斷開連接。

七、頁(yè)面渲染階段

具體的渲染是很復(fù)雜的，篇幅有限，接著下一篇繼續(xù)。

八、靈魂拷問

• 瀏覽器為什么要進(jìn)行url解析，編碼規(guī)則是什么，如何解析

• 域名解析的過程，遞歸查詢，迭代查詢

• 網(wǎng)絡(luò)請(qǐng)求三次握手、四次揮手原理，為什么要三次握手，兩次不行嗎

• 網(wǎng)絡(luò)請(qǐng)求的過程，計(jì)算機(jī)網(wǎng)絡(luò)體系

• ping的原理是什么

• http緩存的分類，強(qiáng)緩存和協(xié)商緩存、啟發(fā)式緩存

• 如何設(shè)置http緩存

• http和https區(qū)別，不同版本的區(qū)別

• 瀏覽器的渲染原理、渲染順序

• 頁(yè)面渲染優(yōu)化

• 什么是重繪和回流

• 三次握手、四次揮手