Web 前置知識——老生常談的從 URL 輸入到頁面展現背後發生的事

itsOli發表於2019-04-01
Web
本文推薦 PC 端閱讀~

本文版權歸 “公眾號 | 前端一萬小時” 所有，未經授權，請勿轉載！
複製程式碼

獲取編號.png

web_01
複製程式碼

涉及面試題.png

1. 從 URL 輸入到頁面展現背後發生了什麼事？
2. 一次完整的 HTTP 事務是怎麼一個過程？
3. 瀏覽器是如何渲染頁面的？
4. 瀏覽器的核心有哪些？分別有什麼代表的瀏覽器？
5. 重新整理頁面，js 請求一般會有哪些地方有快取處理？
複製程式碼

前言： 學前端前，我常用的瀏覽器是搜狗、360，搜尋引擎用的是百度。學前端後，谷歌算是重新為我開啟了認識新世界的大門。但不管用什麼瀏覽器，登入網站都是我們每一個網際網路人每天都會做的事。但我們是否想過，從我們開啟瀏覽器在位址列中輸入一連串的字元，到按下鍵盤上的 Enter 鍵、頁面展現在我們眼前，這一連續動作的背後，網路、計算機都為我們做了些什麼？以及你即將從事的前端工作又在這其中參與了哪一項或哪幾項工作呢？

1 相關概念簡述

首先，開啟你最常瀏覽的一個網站，在最上方的位址列裡，你將會看到一連串的字元。例如知乎：

https://www.zhihu.com/people/oliver-8-10/activities
複製程式碼

上邊這一連串的字元，就叫做 URL（Uniform Resource Locator 統一資源定位符），實際上就是我們通常叫的“網址”。

1.1 URL 的作用

在茫茫網路世界中，我們的瀏覽器是靠一個個 URL 來查詢資源的具體位置的。

1.2 URL 的組成部分（用以下例子說明）

https://www.zhihu.com/people/oliver-8-10/activities
複製程式碼

1.2.1 協議部分

https
複製程式碼

它是瀏覽器和 www 全球資訊網之間的溝通方式，它會告訴瀏覽器在網路世界中找到資源的正確位置。 常見的協議有：http（最常見的網路傳輸協議）、https（進行加密的網路傳輸協議）、file（本地資料夾協議）、ftp、telnet 等。

1.2.2 網路地址部分

www.zhihu.com
複製程式碼

即我們常說的“域名”（Domain Name），為了方便記憶，人們用可以語義化的域名來登入網站。 但我們必須知道，每一個域名背後都有其對應的 IP 地址。
IP 是網路世界中每臺聯網的計算機為實現相互通訊而遵循的規則協議，IP 可以具體分為：
1️⃣區域網 IP：

  • 例如一個合租的房子，大家共用一個路由的 wifi，那實際上所有連線上這個 wifi 的電腦都處於同樣一個區域網，這裡的 IP 就是區域網 IP；
  • 在同樣的區域網裡，可以直接通過這個 IP 地址訪問這個區域網裡的其他機器；
  • 但陌生人是不可以通過這個 IP 找到你的，因為這個 IP 是假的，只在這個小圈子裡可以用。

2️⃣公網 IP：

  • 假如你做了一個網站要放在公網上，就要申請公網 IP，公網 IP 是需要申請的。

3️⃣本機 IP：

  • 當前電腦的 IP 是 127.0.0.1 ，就是代表自己。

1.2.3 資源路徑部分

/people/oliver-8-10/activities
複製程式碼

1.3 DNS

提到域名和 IP 關係後，就必須理解 DNS（Domain Name System 域名系統）——用來記錄域名和 IP 地址相互對映的資訊。

  • DNS 作用：可以讓人們免於記住那些繁瑣的數串；
  • 全國 DNS 資訊可以在網上查詢到，各省都有對應分配的 IP 網段；
  • 大型企業都有自己的 DNS 伺服器，專門用來儲存域名和 IP 的對映關係；
  • 如谷歌的 DNS 伺服器地址 8.8.8.8 ；國內知名 DNS 伺服器地址 114.114.114.114 。

2 大致流程概述

從 URL 輸入到頁面展現經過以下過程：

  1. 在瀏覽器輸入 URL；
  2. 瀏覽器查詢域名對應的 IP 地址；
  3. 瀏覽器根據 IP 地址與伺服器建立聯絡；
  4. 瀏覽器與伺服器通訊：瀏覽器請求，伺服器處理請求並呈現頁面。

3 具體流程概述

3.1 第一步，在瀏覽器輸入 URL

在位址列輸入相應的 URL 。

3.2 第二步，瀏覽器查詢域名對應的 IP 地址

第一步中，我們已經輸入了相應的 URL，但瀏覽器本身並不能識別 URL 是什麼，因此從我們輸入 URL 開始，瀏覽器就要進行域名解析來找到對應 IP——DNS 解析是瀏覽器的實際定址方式：

  • 查詢瀏覽器快取——近期瀏覽過的網站，瀏覽器會快取 DNS 記錄一段時間 （如果沒有則往下） ；
  • 查詢系統快取——從 C 盤的 hosts 檔案查詢是否有儲存的 DNS 資訊，查詢是否有目標域名和對應的 IP 地址 （如果沒有則往下）；
  • 查詢路由器快取 （如果沒有則往下）；
  • 查詢 ISP DNS 快取——從網路服務商（比如電信）的 DNS 快取資訊中查詢（如果沒有則往下）；
  • 經由以上方式都沒找到對應 IP 的話，就會向根域名伺服器查詢目標 URL 對應的 IP，根域名伺服器會向下級伺服器轉達請求，層層下發，直到找到對應的 IP 為止。

3.3 第三步，瀏覽器根據 IP 地址與伺服器建立聯絡

第2步中，瀏覽器通過 IP 定址找到了對應的伺服器，瀏覽器就將使用者發起的 http 請求傳送給伺服器。伺服器開始處理使用者請求：

  • 每臺伺服器上都會安裝處理請求的應用——web sever；
  • 常見的 web sever 產品有：apache 、nginx 、IIS 和 Lighttpd 等；
  • web sever 可以理解為一個管理者，它不做具體的請求處理，而是會結合配置檔案，把不同使用者發來的請求委託給伺服器上專門處理相應請求的程式（伺服器上的相應程式開始處理請求的這一部分，通俗說就是實際後臺處理的工作）：

後臺開發現在有很多框架，但大部分都是按照 MVC（model view controller）設計模式搭建的，它將伺服器上的應用程式分成3個核心部件且分別處理自己的任務，實現輸入、處理、輸出的分離：

3.3.1 模型（model）

  • 模型，是將實際開發過程中的業務規則和所涉及的資料格式進行模型化；
  • 應用於模型的程式碼只需寫一次就可以被多個檢視重用；
  • 在 MVC 三個部件中，模型擁有最多的處理任務；
  • 一個模型能為多個檢視提供資料。

3.3.2 檢視（view）

  • 檢視是使用者看到並與之互動的介面；
  • 這一部分，也就是我們前端工作的主力所在。

3.3.3 控制器（controller）

  • 作用：接受使用者的輸入並呼叫模型（M）和檢視（V）去完成使用者的需求；
  • 地位：控制器也是處於一個管理者的地位——從檢視（V）接收請求並決定呼叫哪一個模型構件（M）來處理請求，然後再確定用哪個檢視（V）來顯示模型（M）處理返回的資料。

?總而言之：

  • 首先，控制器（C）接收使用者的請求，並決定應該呼叫哪個模型（M）來進行處理；
  • 然後，模型（M）用業務邏輯來處理使用者的請求並返回資料；
  • 最後，控制器（C）再用相應的檢視（V）來格式化模型（M），進而返回 html 字串給瀏覽器。

3.4 第四步，瀏覽器與伺服器通訊

在上邊的第 3 步中，伺服器返回了 html 字串給瀏覽器，此時，瀏覽器將會對其進行解析、渲染並最終繪製網頁：

3.4.1 載入

  • 瀏覽器對一個 html 頁面的載入順序是從上而下的；
  • 瀏覽器在載入的過程中，同時進行解析、渲染處理；
  • 在這個過程中，遇到 link 標籤、image 標籤、script 標籤時，瀏覽器會再次向伺服器傳送請求以獲取相應的 css 檔案、圖片資源、js 檔案，並執行 js 程式碼，同步進行載入、解析。

3.4.2 解析、渲染

  • 解析的過程，其實就是生成 dom 樹（Document Object Model 文件物件模型）；
  • dom 樹是由 dom 元素及屬性節點組成，並且加上 css 解析的樣式物件和 js解析後的動作實現；
  • 渲染：就是將 dom 樹進行視覺化表示。

3.4.3 繪製網頁

  • 瀏覽器通過渲染，將 dom 樹視覺化，得到渲染樹；
  • 構建渲染樹使頁面以正確的順序繪製出來，瀏覽器遵循一定的渲染規則，實現網站頁面的繪製，並最終完成頁面的展示。

後記： 以上就是從 URL 輸入到頁面展示的全部過程，不得不佩服計算機真的神通廣大、人類真的智慧無窮。程式碼的世界是嚴謹的、是一絲不苟的，你付出，它就有回饋。當然，以上每個節點都囊括很多的知識點，對於學前端的你我來說，要保持謙卑之心，學無止境，它也值得你我用後邊的 10000 小時來對待。

加油！

相關文章