老生常談，也有可能在面試里遇到～
1. 從 URL 輸入到頁面展現背后發生了什么事？
2. 一次完整的 HTTP 事務是怎么一個過程？
3. 瀏覽器是如何渲染頁面的？
4. 瀏覽器的內核有哪些？分別有什么代表的瀏覽器？
5. 刷新頁面，js 請求一般會有哪些地方有緩存處理？
首先，打開你最常瀏覽的一個網站，在最上方的地址欄里，你將會看到一連串的字符。例如知乎：
上邊這一連串的字符，就叫做 URL（Uniform Resource Locator 統一資源定位符），實際上就是我們通常叫的“網址”。
1.1 URL 的作用
在茫茫網絡世界中，我們的瀏覽器是靠一個個 URL 來查找資源的具體位置的。
1.2 URL 的組成部分（用以下例子說明）
1.2.1 協議部分
它是瀏覽器和 www 萬維網之間的溝通方式，它會告訴瀏覽器在網絡世界中找到資源的正確位置。 常見的協議有：http（最常見的網絡傳輸協議）、https（進行加密的網絡傳輸協議）、file（本地文件夾協議）、ftp、telnet 等。
1.2.2 網絡地址部分
即我們常說的“域名”（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 資源路徑部分
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 輸入到頁面展現經過以下過程：
- 在瀏覽器輸入 URL；
- 瀏覽器查找域名對應的 IP 地址；
- 瀏覽器根據 IP 地址與服務器建立聯系；
- 瀏覽器與服務器通信：瀏覽器請求，服務器處理請求並呈現頁面。
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 樹可視化，得到渲染樹；
- 構建渲染樹使頁面以正確的順序繪制出來，瀏覽器遵循一定的渲染規則，實現網站頁面的繪制，並最終完成頁面的展示。
作者：itsOli
鏈接：https://juejin.im/post/5ca217a051882543f252dc1e
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。