從URL輸入到頁面展現發生了什麼？
01-31
第一步：在瀏覽器輸入URL
- URL是什麼？
- URL(Uniform Resource Locator)：統一資源定位符
- URL用於定位互聯網上的資源(例如尋找互聯網上的一張圖片)
- URL對應一些信息：協議，埠號，域名等其他相關信息
- 常見的協議
- http協議：用於找到網路上的某個資源
- file協議：用於定位本地電腦上的文件
- https協議：經過加密後的，安全的http協議
- //：沒有明確寫明協議，表示與當前頁面的協議保持一致
第二步：域名解析
當我們從瀏覽器中輸入URL後，例如https://jirengu.com，瀏覽器並不能理解http://jirengu.com實際上代表什麼意思，瀏覽器需要查找http://jirengu.com這個網站所在伺服器的IP地址才能夠定位資源。
- 域名是什麼？
- 對於https://jirengu.com:8080/blog來說，http://jirengu.com就是域名(埠若不是80則不能省略)。
- 對於http://music.baidu.com/來說，http://baidu.com就是域名。
- IP地址是什麼？
- 每個處於互聯網中的設備都有IP地址(形如192.168.0.1)，沒有IP地址別人就無法找到這個設備，這個設備也就無法聯網。127.0.0.1代表本機IP地址。
- 區域網IP和公網IP有什麼區別？
- 舉例：路由器有一個區域網IP(內網IP)和一個公網IP，公網IP是寬頻服務商提供給我們的。區域網IP地址是路由器分配的。當我們的手機和電腦同時接入路由器時，手機和電腦的公網IP是相同的，而區域網IP是不同的。此時我的手機可以通過區域網IP來訪問電腦上的資源。
- 為什麼要使用域名而不使用IP地址？
- 域名有語義化的作用，它比IP地址更容易記憶。
- 域名解析的具體流程是怎樣的？
- 瀏覽器緩存：假如我們在瀏覽器輸入jirengu.com，如果我們曾經訪問過jirengu.com，找到過它的ip地址，瀏覽器就會將這個ip地址緩存一段時間，那當我們再去訪問的時候，瀏覽器就知道jirengu.com的ip地址然後直接去訪問這個ip地址。
- 系統緩存：當我們第一次訪問某個網站時，瀏覽器中是沒有關於這個網站的ip地址的記錄的，此時瀏覽器會去查找系統緩存。瀏覽器會查找電腦上的hosts文件中是否有該域名和對於的IP。
- 路由器緩存：如果系統緩存中沒有，則會去路由器緩存中查找是否有相關記錄。(一般來說路由器會緩存域名信息)。
- ISP DNS緩存：如果路由器緩存中沒有相關的記錄，則會到互聯網服務提供商(例如電信)的DNS中查找
- 根域名伺服器：倘若ISP DNS緩存中沒有相關記錄，則會到根域名伺服器查找對應IP，根域名伺服器把請求轉發給下一級，直到找到對應的IP為止。
- 8.8.8.8是谷歌提供的DNS伺服器的IP地址，114.114.114.114是電信的。如果我們打不開一個網址，說明我們上述五個環節中可能在某處出了問題，這個網址所對應的的IP被無法找到，那麼我更改DNS為8.8.8.8，略過上述某些環節，直接從谷歌提供的DNS伺服器中查找相關的IP記錄。
- 舉例：我的電腦的hosts文件被篡改了，導致某個域名解析到了不正確的IP地址，那麼在域名解析的過程中如果在系統緩存中找到了域名和對應錯誤IP的記錄，則會訪問錯誤的IP地址。
第三步：伺服器處理
域名解析成功，訪問正確的IP地址，此時進入伺服器處理階段。
- 伺服器是什麼？
- 伺服器是一台一台安裝了系統的電腦。常見的系統有Linux，Windows Server 2012。
- 伺服器如何處理請求？
- 由伺服器上安裝的處理請求的應用(Web server)來處理。
- 常見的Web伺服器有：Apache、Nginx、IIS、Lighttpd。
- Web伺服器接收用戶的Requset交給網站代碼或反向代理到其他伺服器。
第四步：網站處理流程
MVC(Model View Controller)設計模式，模型-視圖-控制器的縮寫。
- Model：給控制器提供了數據操作的介面
- View：視圖層
- Controller：統一管理
第五步：瀏覽器處理
瀏覽器接收到經過網站處理流程後得到的HTML字元串，對這些字元串進行一句句的讀取解析。
- 解析到 link 標籤後重新發送請求獲取css
- 解析到 script 標籤後重新發送請求獲取js，並執行代碼
- 解析到 img 標籤後重新發送請求獲取圖片資源
第六步：繪製網頁
瀏覽器根據 HTML 和 CSS 計算得到渲染樹，繪製到屏幕上，JS會被執行，頁面展現。
最近從零開始學習前端，屬於小白級別。上述知識如有錯誤還請各位指出，謝謝。
推薦閱讀：