預(yù)備知識(shí)
W3C 的Navigation Timing Specification 定義了一組API ,可以觀察瀏覽器的每一個(gè)請(qǐng)求的時(shí)序和性能數(shù)據(jù)。
瀏覽器發(fā)起一個(gè)鏈接請(qǐng)求的時(shí)候，瀏覽器會(huì)檢查本地緩存肃廓，如果符合的cache信息盲赊，就會(huì)使用這個(gè)緩存填充請(qǐng)求吝沫。否則惨险，因?yàn)闊o(wú)法命中緩存 辫愉，就會(huì)發(fā)起一個(gè)完整的網(wǎng)絡(luò)請(qǐng)求
瀏覽器檢查連接池中已有的連接是否可以復(fù)用，即sockets 指定了scheme ,host ,port 定義的連接依疼。如果沒(méi)有膀值，就會(huì)從DNS查詢開(kāi)始沧踏，獲取網(wǎng)址對(duì)應(yīng)的IP 地址
拿到IP 地址后翘狱，就會(huì)進(jìn)行TCP 連接。三次握手赚导，大家都知道的辟癌。當(dāng)握手完成后寡夹，如果連接的是一個(gè)https 的地址，那么還需要一個(gè)SSL 握手過(guò)程
請(qǐng)求開(kāi)始發(fā)送昵济，服務(wù)器收到請(qǐng)求后瞧栗，會(huì)傳送響應(yīng)數(shù)據(jù)回客戶端迹恐。這里包含了最少的往返延遲和服務(wù)處理時(shí)間殴边。一個(gè)請(qǐng)求完了锤岸，但是，如果期間有重定向亡驰，那么又要重頭開(kāi)始凡辱。
關(guān)于網(wǎng)頁(yè)加載速度的思考
由上圖可以看出洪燥，從App Cache 到 TCP ,對(duì)用戶來(lái)說(shuō)是透明的,瀏覽器可以優(yōu)化這個(gè)階段耗時(shí)捧韵。假設(shè)以下搜索場(chǎng)景再来，用戶在瀏覽器輸入框輸入：githu ，打開(kāi)github官網(wǎng)搜变。
上圖的依次是百度瀏覽器，QQ 瀏覽器篡帕，UC 瀏覽器拢军，夸克瀏覽器拌滋，從搜索到打開(kāi)網(wǎng)頁(yè)赌渣，操作行為差異不大坚芜。那么搜索體驗(yàn)關(guān)鍵在于打開(kāi)網(wǎng)頁(yè)的速度。如何提高打開(kāi)網(wǎng)頁(yè)的速度铸敏，在網(wǎng)速等條件一樣的時(shí)候闪水，可以通過(guò)預(yù)連接來(lái)提高網(wǎng)頁(yè)打開(kāi)速度球榆。
瀏覽器可以通過(guò)某些算法來(lái)預(yù)測(cè)用戶搜索的行為持钉，當(dāng)滿足條件的時(shí)候發(fā)起預(yù)連接。預(yù)測(cè)算法很關(guān)鍵窘茁，因?yàn)槿绻A(yù)測(cè)的命中率很低，那么將會(huì)引起多余的網(wǎng)絡(luò)連接的處理邢羔，甚至?xí)辜虞d速度更慢拜鹤。瀏覽器這么成熟的產(chǎn)品，業(yè)內(nèi)對(duì)此肯定有比較牛逼的實(shí)現(xiàn)方法。通過(guò)對(duì)關(guān)鍵字的搜索绣硝，結(jié)果顯示Chrome 是最好的研究的對(duì)象握玛。下面以mac 端的chrome 開(kāi)展研究
Chrome 瀏覽器
用戶在瀏覽器的行為：
- 啟動(dòng)瀏覽器
- 輸入關(guān)鍵字
- 選擇瀏覽器建議的網(wǎng)址
- 瀏覽器打開(kāi)網(wǎng)頁(yè)
啟動(dòng)瀏覽器
每次Chrome的啟動(dòng)，它會(huì)對(duì)你最近訪問(wèn)最多的10個(gè)域名進(jìn)行DNS 解析拂苹，加快網(wǎng)頁(yè)的打開(kāi)速度 ,通過(guò)在瀏覽器輸入框輸入： chrome://dns 可以查看醋寝。
通過(guò)觀察上面的數(shù)據(jù)仓犬，github.com 有8個(gè)對(duì)應(yīng)的子資源主機(jī)窘面，表中記錄了每個(gè)主機(jī)的請(qǐng)求次數(shù)，TCP 預(yù)連接發(fā)生的次數(shù)以及DNS預(yù)解析發(fā)生的次數(shù)。這些數(shù)據(jù)都提供給Chrome 的Predicator 進(jìn)行決策參考。
輸入關(guān)鍵字
當(dāng)用戶在輸入的時(shí)候憨募，瀏覽器會(huì)根據(jù)輸入的關(guān)鍵字珠漂，推薦相關(guān)的內(nèi)容尾膊。并根據(jù)用戶以往的行為等參數(shù)來(lái)預(yù)測(cè)點(diǎn)擊的行為眯停，提前進(jìn)行預(yù)連接。通過(guò)在輸入框輸入：chrome://predictors 可以查看瀏覽器predicator。
Chrome維護(hù)著一個(gè)歷史記錄，內(nèi)容包括用戶輸入的前置文字我纪，采用的行為浅悉，以命中的資數(shù)。在上面的列表粘衬，你可以看到，當(dāng)輸入g時(shí)，有66%的機(jī)會(huì)嘗試打開(kāi)github. 如果再補(bǔ)充一個(gè)i , 打開(kāi)github的可能性增加到100%飞醉。
黃色底色的url, Chrome會(huì)發(fā)起DNS預(yù)解析。綠色底色的話，Chrome還會(huì)在DNS解析后發(fā)起TCP預(yù)連接。通過(guò)chrome://dns 可以看出TCP 預(yù)連接的情況：
Chrome 在發(fā)生預(yù)連接之前趣席，會(huì)檢查socket pool 里面有沒(méi)有可以復(fù)用的socket .如果沒(méi)有宣肚，就發(fā)起TCP 連接霉涨，然后把對(duì)應(yīng)的socket 放到socket pool 中，這些socket 會(huì)在socket pool 里面保留一段時(shí)間，方便下次復(fù)用凄杯。通過(guò)chrome://net-internals/#sockets 可以查看當(dāng)前sockets 的狀態(tài)：
平均而言用戶從填寫查詢內(nèi)容到評(píng)估給出的建議需要花費(fèi)數(shù)百毫秒妖谴。此時(shí)Chrome可以在后臺(tái)進(jìn)行預(yù)解析，預(yù)連接窑多，甚至進(jìn)行預(yù)渲染埂息。再當(dāng)用戶準(zhǔn)備按下回車鍵時(shí)，大量的網(wǎng)絡(luò)延遲已經(jīng)被提前處理掉了拾弃。
瀏覽器打開(kāi)網(wǎng)頁(yè)
打開(kāi)網(wǎng)頁(yè)后，大量的資源會(huì)被cache 下來(lái)搭盾，當(dāng)下次再次請(qǐng)求的時(shí)候鸯隅，如果和cache 命中蝌以，網(wǎng)頁(yè)的加載速度將會(huì)達(dá)到最快。在輸入框輸入： chrome://cache 可以查看chrome緩存的資，點(diǎn)擊打開(kāi)某一項(xiàng)庇忌，查看詳細(xì)信息皆疹。
有效的cache 可以大幅度提高瀏覽體驗(yàn)。
Chrome 瀏覽器會(huì)是一個(gè)越用越快的瀏覽器！ 它牛逼的地方肯定不止上面說(shuō)的幾點(diǎn)彰导，利用周末學(xué)習(xí)了一下位谋，受益匪淺呀。
移動(dòng)端瀏覽器網(wǎng)絡(luò)優(yōu)化
- 記錄用戶常去的網(wǎng)站秆剪，在瀏覽器啟動(dòng)的時(shí)候進(jìn)行預(yù)連接。
- 通過(guò)一定的算法預(yù)測(cè)用戶打開(kāi)網(wǎng)站的行為，提前進(jìn)行預(yù)連接处渣。
