日日新聞 2023-10-3 22:43
本文屬於理論知識，會出現許多專有名詞，瞭解這些名詞對於網站的開發和部署都會有幫助，能提高分析、排查和解決問題的能力。計算機屬於工科，比較推薦的方式是邊做邊學。做固然是最重要的，但學也要跟上。光學不做，那就是眼睛看，腦子會，一上手，就報廢；光做不學，就難以進步，知識的深度和廣度都難以提高，甚至可能都不知道為什麼要這麼做，不能靈活的運用知識，做起來只會事倍功半，這一點筆者本人也是深有體會。將知識編織成網絡，工作會更得心應手；在實踐中運用學習到的知識，對知識也會有更深的印象和理解。當然，在學習理論知識的過程中難免會遇到晦澀難懂的或者是暫時難以解釋的部分，這些部分可以先不深入瞭解，只記住怎麼去用就行。等實際上手的時候，疑惑也許就自然而然解開了。
這就有點像學習樂器，你當然可以不瞭解樂理，只記住該按什麼位置，只要練習得夠多，照樣可以把曲子彈出來；但學習樂理能讓你對於演奏的內容有更好的理解，對於音樂的把控也會更好。
用戶要訪問網站，只需要聯網，在瀏覽器地址欄輸入網址，然後回車，網站的內容就出來了，就是這麼簡單。
但這個過程是怎麼樣的呢？以及你有沒有思考過以下的幾個問題：
先來看看最開始提的問題，當不聯網時訪問一個網站會看到什麼，用Chrome瀏覽器看到的是這樣的結果，他說“未連接到互聯網”。
[img]https://storage.inewsdb.com/47116a293cebe7e71c2dd6d02ed4d99d.jpg[/img]
那又出現了新的問題：互聯網是什麼？為什麼未連接到互聯網就不能訪問網站呢？百度百科的說法是這樣的：
百度百科說，互聯網是網絡與網絡之間以通用的協議串聯成的龐大網絡。做一個名詞代換，計算機未連接到這個龐大的網絡，就沒法訪問網站。但什麼是網絡？繼續在百度百科搜索，發現對網絡一詞的解釋和上網沒什麼關係，對它的解釋是包括了很多節點和節點之間的鏈路。下圖是網絡的示意圖。
[img]https://storage.inewsdb.com/21e55918bf018bba016fe849fa2201b1.jpg[/img]
那就繼續搜索，這次把範圍縮小，搜索計算機網絡，百度百科對計算機網絡的定義部分很長，耐心看完不難總結出：計算機網絡也是一種網絡，包括了節點和鏈路。在計算機網絡中，節點就是計算機系統和通信設備，節點之間的鏈路就是通信線路。而計算機網絡的目的是共享資源、信息傳遞。
在百度百科中還能看到，計算機網絡可以分成局域網、城域網、廣域網。分類的標準就是覆蓋範圍的大小，範圍小的是局域網，範圍稍大的是城域網，範圍更大的是廣域網。一個個局域網連接而成，形成了更大的局域網，甚至是城域網；城域網連接而成，構成了廣域網；全世界的網絡連接起來，最大的這個廣域網就是互聯網。
至此，第一個問題就解決了，來總結梳理一下上面講到的內容：計算機網絡是由若干計算機和通信設備連接而成的計算機集合，處在同一個網絡下的計算機能共享資源、傳遞信息。計算機網絡可以根據覆蓋範圍，分成局域網、城域網、廣域網。而互聯網是最大的廣域網，連接了全世界的計算機和設備。當計算機未連接到互聯網，也就表示他沒法和其他計算機共享資源、傳遞信息，而網站也是其他計算機的資源之一，所以沒法訪問其他人計算機中的網站。
那怎麼才能讓自己的計算機連接到互聯網，從而和其他的計算機通信呢？這個問題暫時用不著從專業的角度去思考，就想平時自己是怎麼上網的就知道了：連WiFi、開流量、連網線。具體的細節之後再開一篇文章來單獨說這個內容。
學習了上一節可以知道，互聯網是全世界計算機的集合，網站是一臺計算機的資源之一，連接互聯網上訪問某個網站就是訪問某臺計算機的某個資源。而具體訪問哪一臺計算機的哪一份資源，我們都知道是通過網址來指定的。就像打電話一樣，要想和某個人通話，就要先知道對方的電話號碼。網址，可以理解成計算機的電話號碼，每個網址都是唯一的。目前常用的一種寫法是【xxx.xxx.xxx.xxx】，其中xxx的取值範圍是0~255的之間的整數，這個就是IPv4的IP地址寫法。
打電話不可能記住所有聯繫人的電話號碼，上網也一樣。電話的解決辦法是為聯繫人設置備註名，而上網則是給IP地址設置域名，例如百度的地址對應的域名就是www.baidu.com。比起一串數字，還是這種方式更能讓人記住。和聯繫人備註有所區別的是，域名不能重複，也就是說只有一個www.baidu.com。但一個IP地址可以有多個域名，一個域名也可以對應多個IP地址。用瀏覽器訪問www.baidu.com，其實就是去訪問它對應的IP地址。
那怎麼知道這個域名對應的IP地址是什麼呢？
這就要用到DNS服務了。DNS是Domain Name System，翻譯過來就是域名系統。它的功能就是記錄域名和IP地址的對應關係（映射）。當瀏覽器訪問www.baidu.com的時候，首先會在瀏覽器的DNS緩存（臨時存放內容的區域就叫緩存）中看看有沒有記錄，如果有就找到了這個域名對應的IP地址就可以直接訪問；如果沒有，瀏覽器就會向計算機的DNS服務發出請求，讓他幫忙找找它有沒有記錄；如果還是沒有，就會查找本計算機的hosts文件；還是沒有就會向根域名服務器發送請求。根域名服務器不知道這個域名對應的IP地址，但它知道誰知道。它就會告訴計算機DNS服務，讓它去找下一個服務器來詢問。以此類推，直到本地域名服務器知道了要訪問的IP地址為止。如下圖所示。
[img]https://storage.inewsdb.com/85751e875907e4a6bfcf0cff4605cbe9.jpg[/img]
還有一項技術叫做CDN，content delivery network。其實很簡單，就是分店的思想，如果全國只有一家麥當勞，座標北京，我廣東人要想吃一趟麥當勞也太麻煩了；要是我辛辛苦苦去到北京，結果麥當勞關門了，那我心態就崩了。為了解決這個問題，麥當勞就在全國開了很多家店，並且菜單的內容都是一樣的，那我就可以在廣東吃到麥當勞了。如果要請求的資源所在的服務器在北京，而我人在廣東，那獲取資源時間就很長，甚至還會發生網絡擁塞。如果廠家在全國各地都提供了服務器，那就方便各地的人訪問了。CDN更適合用於存放靜態內容，因為能所有服務器保持統一。CDN有負載均衡功能，自動選擇最優的服務器進行響應，從而分擔了單個服務器的負載。DNS可以配合CDN，把離用戶最近的IP地址返回給用戶。
要在DNS解析時使用CDN的大致方法是：配置DNS服務，讓他在解析到特定的域名時，將這個域名轉交給【專門解析有CDN服務的域名的DNS服務器】。這個服務器會告訴你負載均衡服務器的地址。負載均衡服務器能幹的事就是根據你的網絡地址，找到離你最近並最適合的設備。配置好了之後域名解析過程如下圖所示：
[img]https://storage.inewsdb.com/26a3ebb70f6e4b9092555b086775dcc4.jpg[/img]
上面就是從輸入網址到獲取IP地址的流程。回到一開始問的第二個問題，測試過可以知道，瀏覽器會判斷輸入的是不是一個網址，如果是就解析域名獲取IP地址然後訪問網站，顯示出頁面內容；不是的話就用搜索引擎搜索關鍵詞。
上一章講了如何把域名解析成IP地址，但解析域名之後到瀏覽器顯示頁面之前的過程還是問號，本小節就來介紹這個過程。
域名解析後，瀏覽器就知道了要訪問的目的IP地址。但只知道IP地址是沒法訪問網站的，還要知道端口號。一臺計算機只有一個IP，但一臺計算機裡面可以啟動很多應用和服務，例如瀏覽器、QQ、微信……只知道IP沒法找到具體的應用，還要靠端口號來更精準的查找。一臺計算機能提供65536個端口，其中端口號在0~1023的端口，都分配給了常用的一些服務。
這時候又出現一個問題：用域名訪問網站的時候也沒見要加端口號啊，直接就是www.baidu.com。照上面這麼說，不應該還得加上端口號嗎？事實上用域名訪問網站的時候是有端口的，只是被省略了而已。
在百度首頁時，查看地址欄可以看到完整的樣子：https://www.baidu.com/。前面的【https://】表示訪問服務用的是https協議。協議就是規則；使用https協議，換句話說就是要按照https規則的要求來傳輸信息。至於https要求了什麼在此就不深入講解了。除了https以外，訪問網站時常用的協議還有http。http和https都是常用的服務之一，所以他們都分配到了固定的端口，http的默認端口是80，https的默認端口為443。意思是，瀏覽器向服務器發送http請求時，傳輸的內容默認是發送到服務器的80端口的，而瀏覽器中輸入的網址如果不加端口，默認就是向【ip地址:80端口】請求服務。
當然，也有可能將項目部署到其他端口上。但為了網站訪問時的便利性和安全，通常也不會想要輸入端口號的。瀏覽器輸入網址不輸入端口號，默認訪問80端口，那就得讓訪問服務器的80端口時，跳轉到其他端口。解決的辦法有Nginx反向代理。Nginx的內容，也會另外開一篇文章來介紹如何安裝、使用、配置，在此先知道Nginx會用來幹嘛就行。剛才說解決辦法是Nginx反向代理，那反向代理是什麼意思？代理包括正向代理和反向代理。正向代理是指客戶端（也就是瀏覽器）去找代理。你想和一個外國人溝通，但你們語言不通無法交流，於是你就把你想說的話告訴了翻譯，由翻譯來幫你向對方通信。你找翻譯幫忙傳達消息就是正向代理；而反向代理就是指服務端去找人來處理請求。這個外國人會收到你的信息，也會收到其他人的信息，他會把這些信息交給不同的人幫他處理。表面上是你和外國人進行交流，事實上，是你和他找的人交流，這就是反向代理。瀏覽器的http請求發送到服務器的80端口，Nginx服務監聽80端口，把請求分發給某臺代理服務器的某個端口來處理。
當請求發送到負責處理的端口之後，監聽這個端口的服務就會處理請求，不同的服務有不同的請求處理方式。網站服務會解析http請求，獲取請求的參數，判斷請求的具體是哪個頁面，例如b站首頁是https://www.bilibili.com/，專欄頁是https://www.bilibili.com/read/cv25705257/，視頻頁是https://www.bilibili.com/video/BV1Cu4y1U7BT/，可以看到都是https://www.bilibili.com開頭，只是後面的不同。根據這些不同，服務端就會獲取不同的頁面來返回給瀏覽器。
細心觀察上面的視頻頁網址可以發現它帶上了BV號。用b站的用戶知道，一個BV號和一個視頻一一對應，一個網址對應播放一個視頻。那難道每一個視頻都要寫一個網頁嗎？從這個巨大的工作量來看很明顯不是。觀察可以發現，看不同的視頻，雖然網址變了，但頁面的結構是沒有變的，變的只是內容，所以只需要寫一個頁面，更換頁面的內容就行了。當然，更換內容也不是亂更換的，一個BV號始終對應一個視頻、一個UP主、一個評論區……這些東西都是因為BV號的不同而不同。BV號就像一個身份證（id），根據這個身份證，就能找到對應的人，知道他的年齡、性別、民族……服務器會把每個BV號對應了哪些內容記錄下來，存儲到數據庫中。而在數據庫查找視頻的配套內容，就是靠BV號這個id來作為搜索的依據。當我們進入視頻頁，視頻頁會根據BV號向服務端發送請求，查詢出應該顯示哪些內容，然後去獲取這些資源來顯示。這裡有個地方要明確：瀏覽器請求的是隻是頁面的結構，頁面裡面的內容是由頁面去請求另外的服務得到的。頁面和內容是分開的，這個就是所謂的前端服務和後端服務。瀏覽器向前端服務發送請求，前端服務向後端服務發送請求，後端服務向數據庫發送請求，數據庫獲取數據返回給後端服務，後端服務把數據返回給前端服務，前端服務將頁面返回給瀏覽器。
在瀏覽器輸入網址然後回車是瀏覽器向前端服務發送請求，上面已經介紹過了。而前端服務向後端服務、後端服務向數據庫服務發送請求，也是一個端口向另一個端口通信。前端服務向後端服務發送的請求也是http請求，不過請求的是後端服務的API接口。API接口是什麼意思？再來打個比方：去醫院看病首先得知道要掛哪個科室的號，這些科室是醫院來劃分的，不同的醫院劃分科室可能有所不同，病人可以看到科室的分類然後自己選擇掛哪個號，每個科室的醫生都有對應的知識儲備來為病人看病。假如一個人喉嚨痛，他看可以掛的科室裡面有外科，有骨科，有耳鼻喉科……他掛了耳鼻喉科，耳鼻喉科的醫生就會幫他看病，最後給病人開喉嚨痛的藥。API接口，大致可以理解成科室；前端請求API接口，大致可以理解成掛某個科室的號；後端返回響應，大致可以理解成開藥。前端服務有啥需求就會請求哪個後端接口。接口名、接口需要的參數等信息則是寫到一份接口文檔中，供前端服務和後端服務的開發者一同閱讀。後端服務會請求訪問數據庫，操作或查詢數據庫，然後將操作的結果返回給前端。
接下來，還有最後的一步：瀏覽器解析請求回來的響應內容。這部分在上一篇文章《認識並編寫簡單網頁》中也有講過：瀏覽器會按照自己的方式來閱讀、解析網頁的內容，然後將內容呈現出來。現在就來講一講瀏覽器是如何解析和呈現的。現在我們常用的瀏覽器都是多進程瀏覽器，包括瀏覽器主進程、渲染進程、插件進程、GPU進程。主進程負責管理各個tab標籤、管理和下載網絡資源。而渲染進程負責html、css、js文件的解析、渲染、事件處理，一般來說，每打開一個標籤頁，就會佔用一個渲染進程。瀏覽器收到響應後會把數據交給渲染進程處理。渲染進程開始處理：
1. 根據html文件生成DOM結構樹。DOM是document object model，文檔對象模型，將html文件表示成樹形結構。樹形結構是什麼呢？生活中的樹往往是一個樹幹分出許多樹枝，樹枝也可以再分，是一個多層的結構。樹形結構第一層有一個根節點，第二層就是根節點的兒子們。第三層就是第二層節點的兒子們。在DOM結構樹中，html是根節點，head和body是第二層的子節點，再往下就是第三層……
[img]https://storage.inewsdb.com/8c38c66012989c32f10b24fe4a6ad9c9.jpg[/img]
2. 把css文件解析成CSSOM，過程和構建DOM類似。
[img]https://storage.inewsdb.com/858e85b734baa78b87707006b01b602f.jpg[/img]
3. 有了上面的兩棵樹之後，合併生成渲染樹。渲染樹的節點被稱為渲染對象，渲染對象是一個個矩形，和DOM元素對應，不可見的DOM元素不會被插入渲染樹。
4. 生成渲染樹之後，根據渲染樹來進行佈局，生成一個個圖層。
5. 繪製圖層。
6. 整合所有圖層，得到頁面。
本章介紹了很多內容，包括計算機網絡的組成和目的、計算機網絡的分類、IP地址是什麼、怎麼把域名解析成IP地址、網址的組成部分有哪些、正向代理和反向代理是什麼、如何把服務代理到其他端口、瀏覽器輸入回車是向誰發送請求、瀏覽器拿到響應前經過了哪些環節、瀏覽器拿到響應後是如何解析成網頁的。
以上的內容，本人已經盡力用簡單易懂的詞語來解釋，還在一些難以理解的部分打了比方輔助理解，閱讀起來應該不算吃力。現在再回頭看看一開始問的第三個問題：為什麼訪問有些網站要這麼久才能顯示出內容？你是否能想到訪問網站要經過哪些過程，哪些過程可能會需要比較長的時間，從而回答出這個問題呢？
原文連結：[url]https://inewsdb.com/%e5%85%b6%e4%bb%96/%e3%80%90%e5%b0%8f%e7%99%bd%e5%be%9e%e9%9b%b6%e5%81%9a%e7%b6%b2%e7%ab%99%e8%a8%98%e9%8c%84-%e7%90%86%e8%ab%96%e7%af%87%e3%80%91%e8%a8%aa%e5%95%8f%e7%b6%b2%e7%ab%99%e7%9a%84%e9%81%8e%e7%a8%8b/[/url]
[url=https://inewsdb.com]inewsdb.com[/url] 日日新聞 . 掌握每日新鮮事