某一地區用戶的網頁打不開了？？？

情景：某日，我正在刷前端博客，旁邊的前端大神說，

大神：小星，給你出道面試題唄，某金服的面試真題哦～
我：嗯？好啊，什麼題，我試試。
大神：某一地區用戶的網頁打不開了，爲何出現這種問題或者你怎麼去解決？
我：嗯，網速很差或者服務器掛了？
大神：注意，是某一地區哦，發散你的思惟，這是道開放類題目。
我（想了一下子，沒啥好答案）：我研究研究。
大神：嗯，這道題仍是挺不錯的，好好想想～
我：哦（本身仍是菜啊）😯
複製代碼

這道題實際上是：當瀏覽器輸入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解析失敗，從而致使頁面加載失敗。因此用戶使用瀏覽器的種類，版本都應在咱們的考慮範圍內。

以上是我想到的致使某一地區用戶網頁打不開的緣由，回顧總結下，個人理解是能夠從四大方面進行剖析：前端，網絡，後端，瀏覽器。目前的解釋與理解可能還比較淺，往後慢慢補充吧，歡迎你們評論互相交流學習。