情景:某日,我正在刷前端部落格,旁邊的前端大神說,
大神:小星,給你出道面試題唄,某金服的面試真題哦~
我:嗯?好啊,什麼題,我試試。
大神:某一地區使用者的網頁打不開了,為什麼出現這種問題或者你怎麼去解決?
我:嗯,網速不好或者伺服器掛了?
大神:注意,是某一地區哦,發散你的思維,這是道開放類題目。
我(想了一會兒,沒啥好答案):我研究研究。
大神:嗯,這道題還是挺不錯的,好好想一想~
我:哦(自己還是菜啊)?
複製程式碼
這道題其實是:當瀏覽器輸入URL後都發生了什麼事情?的一道實際應用,除去基礎知識外,更考察開發人員解決問題的能力,這可能就是大公司更為注重的地方。這道題考察的還是挺全面的,這裡來簡單的寫下我自己的理解,水平有限,僅供參考?。
一,URL地址
當使用者在瀏覽器中輸入URL地址後,會先進行DNS解析,將域名轉為IP地址,瀏覽器根據IP地址,去對應的伺服器上尋找對應的網路資源,之間有一系列的複雜流程,這裡就不再一一的闡述。
DNS解析的大致流程:
1,如果瀏覽器有快取,直接使用瀏覽器快取,否則使用本機快取,再沒有的話就是用host
2,如果本地沒有,就向dns域名伺服器查詢(當然,中間可能還會經過路由,也有快取等),查詢到對應的IP
複製程式碼
針對url以下兩種情況會造成頁面訪問失敗:
1,錯誤的url地址
當使用者輸入一個錯誤的網址時,如果瀏覽器解析對應的IP地址上沒有網路資源時,導致網頁載入失敗,如下圖所示:
當然,這種情況比較low,但是也屬於一種情況不是?
2,本機是否修改HOST檔案
若使用者將網址域名地址與本地HOST進行繫結(開發人員常用的手法)了,在進行IP地址解析時,地址指向使用者本機,導致網路資源載入失敗,從而網頁載入失敗,當然這種情況很少見,這裡只是存在這種可能性,簡單的羅列下。
二,TCP請求,與伺服器建立連線
http的本質就是tcp/ip請求,通過三次握手與伺服器建立連線,步驟如下(抽象派):
客戶端:hello,你是server麼?
服務端:hello,我是server,你是client麼
客戶端:yes,我是client
複製程式碼
這樣只有客戶端與服務端建立了連線,客戶端才可以與服務端進行互動,獲得頁面資源。
建立連線失敗的話就會導致頁面載入失敗:
1,對於大型的專案,由於併發訪問量很大,所以往往一臺伺服器是吃不消的,所以一般會有若干臺伺服器組成一個叢集,然後配合反向代理實現負載均衡,當然了,負載均衡不止這一種實現方式,這裡不深入。若某一地區的伺服器節點出現故障的話,則會造成連線失敗,訪問不到網路資源,導致頁面載入失敗。
2,在與伺服器建立連線的過程中,如果使用者當時的網路環境差,如網速慢、不穩定等,則會影響建立連線的過程,從而導致頁面載入失敗。
三,快取
前後端的http互動中,使用快取能很大程度上的提升效率,而且基本上對效能有要求的前端專案都是必用快取的。
快取可以簡單的劃分成兩種型別:強快取 200 (from cache)與 協商快取(304)。關於快取這裡就不詳細的敘述了,有興趣的同學可以去研究下,裡面的知識點還是挺多的。
當客戶端使用快取對專案進行了優化的時候,如果服務端相關的某些網頁資源進行了更新:如html,js等檔案。而客戶端存在快取,可能會造成快取與服務端資源的不匹配,導致某些功能不可用,嚴重者導致頁面不可載入。這個時候我們就會聽到一句經常聽到的話:讓使用者清除下瀏覽器快取。。。
嗯,你問我快取怎麼清理?暴力美學:
<a onclick="alert(`清除成功!`)">清除瀏覽器快取</a>
複製程式碼
哈哈,皮一下?~
四,客戶端渲染
客戶端與伺服器完成互動,瀏覽器核心拿到內容後,開始瀏覽器頁面渲染,大致分為以下幾步:
1. 解析HTML,構建DOM樹
2. 解析CSS,生成CSS規則樹
3,解析javascript,完成DOM樹與CSS規則樹的構建
4. 合併DOM樹和CSS規則樹,生成render樹
5. 佈局render樹(Layout/reflow),負責各元素尺寸、位置的計算
6. 繪製render樹(paint),繪製頁面畫素資訊
7. 瀏覽器會將各層的資訊傳送給GPU,GPU會將各層合成(composite),顯示在螢幕上
複製程式碼
其中HTML,CSS,JS都會影響頁面的渲染
1,網路
若使用者的網路環境比較差:網速慢或不穩定等,會影響以上三者資源的載入,導致瀏覽器載入資源失敗,從而頁面載入失敗。在上面的 TCP請求,與伺服器建立連線 中也提到過網路相關的問題,同樣的結果,但是原因不同。
2,JavaScript阻塞(瀏覽器相容性)
在前端開發中,瀏覽器的相容性是大家必須考慮的:css屬性以及js方法在瀏覽器中的相容性。其中css屬性的相容性只會影響DOM的樣式,不會阻塞頁面的渲染。而如果js的某個方法瀏覽器不相容的話,可能會導致js解析失敗,從而導致頁面載入失敗。所以使用者使用瀏覽器的種類,版本都應在我們的考慮範圍內。
以上是我想到的導致某一地區使用者網頁打不開的原因,回顧總結下,我的理解是可以從四大方面進行剖析:前端,網路,後端,瀏覽器。目前的解釋與理解可能還比較淺,日後慢慢補充吧,歡迎大家評論互相交流學習。