鏈接網站（擬人化簡述瀏覽器訪問網站的流程）

大傢好，我是三玹！有一段時間沒寫文章瞭，因為這段時間裡感覺遇到瓶頸，有點江郎才盡，擠不出墨水來瞭，所以去找找新思路。真實原因才不是因為我懶~好吧，一時擺爛一時爽，一直擺爛一直爽！回歸正題，這一段時間也確實在學一些新東西，學習瞭一下後端，關於網絡編程的知識，準備搞個服務器玩玩。先來一道開胃菜，咱來聊一聊關於正常瀏覽器訪問網站的一個流程。正文當我們在網頁的地址欄中輸入一串網址，敲下回車，就會打開一個新世界。例如：在瀏覽器的地址欄中輸入百度網址 – https://www.badu.com，敲下回車就會獲得在國內傢喻戶曉的一個界面。這個界面雖然看著簡單，但是看一下它的源代碼，瞧著右上角高高懸掛的拉條，就知道這界面可一點兒都不簡單。（查看源代碼，右鍵網頁界面點擊查看網頁源代碼或者 ctrl+u。）那麼問題來瞭，在我們的電腦中是百分百找不到【百度界面】這個 HTML 文件，更不要說其中的圖片、JS、CSS等資源文件。可以知道的一點，這些資源肯定是百度網站提供的。那麼，我們的瀏覽器是怎麼從網站那邊拿到這些數據，然後在頁面上展示的呢？在流程開始之前，簡單介紹一些概念。網站：是一個由多個網頁組成的信息系統，通常是由服務器端和客戶端組成的。服務器端：網站的核心部分，通常服務器是一臺大型的計算機，存儲著網站所有的網頁、圖片、視頻等信息。同時還負責處理來自客戶端的請求，返回所需的信息。客戶端：網站的用戶端，通常是一臺普通的計算機、或者手機等，我們可以通過客戶端訪問網站查看網站的內容。另外，客戶端通常需要借助瀏覽器等軟件連接網站服務器。第一步 客戶端發送網頁 GET 請求當我們在瀏覽器的地址中輸入網址，並敲下回車的那一刻。就是在跟咱們的跑腿小廝瀏覽器發出瞭一個指令，今兒咱要看這個頁面，你去安排一下。瀏覽器收到我們的命令之後，就會朝著對應網站的服務器端出發。第二步 服務器端接收請求，發送響應包到瞭服務器端的大樓，進入大樓需要經過門衛的檢查，確保你的瀏覽器是正常來路，而不是什麼恐怖分子。身份檢查沒問題後，就會給瀏覽器分配一個客服小姐姐接待：親，有什麼需要幫忙的嗎？瀏覽器此時會將你的指令轉達給客服小姐姐：小姐姐，我傢主子要看你傢的這個網頁，您看OK不？小姐姐就會去找相應的頁面資源文件（HTML文件），如果就交給瀏覽器帶回去。反之如果沒有找到，但也不能讓瀏覽器白跑一趟，就把經典的 404 頁面讓瀏覽器帶回去。第三步 客戶端發送資源 GET 請求瀏覽器拿到瞭頁面資源回傢後，一向嚴謹的他會檢查一下拿到的頁面是否能夠完整地展示出來，會不會缺胳膊少腿。不檢查還好，一檢查可就出大問題瞭，怎麼這個CSS文件少瞭，那個圖片還是破裂的。就這麼展示，今晚的晚飯豈不是沒瞭著落。沒辦法，隻能帶著有資源路徑的 GET 請求再次到服務器端去領取。第四步 服務器端接收請求，發送資源響應於是，瀏覽器又得去一趟服務器端大樓，還得經過門衛的檢查，畢竟門衛不敢保證你這回去的過程中是不是就突然叛變瞭呢。檢查通過後，之前負責接待的客服小姐姐就迎瞭上來。根據瀏覽器提供的資源路徑，去找相應的文件交給瀏覽器。但瀏覽器一次性隻能領一個資源，為瞭能吃上美美的晚飯，就不得不多次往返的跑。直到整個界面的資源都領取瞭一遍，才敢將網頁完整地展示出來。基本到這裡，一個完整的靜態頁面就可以在瀏覽器上展示出來瞭。第五步 客戶端發送 POST 請求但有時候，我們進入一個網站需要登錄，需要填寫賬號密碼提交驗證。這個時候瀏覽器就會帶著有賬號密碼的 POST 請求再次前往服務器端。第六步 服務器接收請求，轉交 CGI處理客服小姐姐接到瞭 POST 請求，但這個請求超出她負責處理的范圍。因此就會代轉交給專業人士 CGI 來進行處理。CGI（Common Gateway Interface，通用網關接口）。第七步 CGI發送處理結果CGI 收到瞭請求後，將裡面的賬號密碼和數據庫裡面的進行比較。如果都符合，就會得到一個’登陸成功‘的處理結果。如果沒找到相應的賬號，就會得到’賬號不存在‘的處理結果賬號存在，但密碼不對，就得到’密碼錯誤‘的處理結果。最後把處理結果交給客服小姐姐。第八步 服務器端發送響應客服小姐姐將CGI的處理結果轉交給瀏覽器，瀏覽器帶著結果回去。如果處理結果是成功的，就可以發現界面中原本登錄註冊那一塊，會變成頭像、昵稱等內容。處理結果失敗瞭，就會在登錄頁面中顯示賬號不存在或者密碼錯誤等提示。總結到這裡，關於瀏覽器訪問網站獲取頁面資源的大致過程就介紹完瞭。整個描述過程似乎看著很復雜，但實際上我們感官上體驗其實也就 1-2 秒的。在正常情況，訪問一個網站響應時間超過 5 秒，大多數人會選擇關閉。其中涉及到的一些知識點，如 GET 請求、POST 請求、CGI 等等；以及一些沒提到但應該有的內容，如 DNS 解析、建立 TCP 請求時的三次握手等等。這些咱們後面一步一步，慢慢展開！最後，大傢要是喜歡本篇文章，還希望能夠點個贊支持一下，謝謝！參考來源1、https://blog.csdn.net/pzjdoytt