從輸入網址到顯示網頁，這個過程究竟發生了什麼？

當輸入URL、敲下回車、最後瀏覽器頁面顯示，這裏面有什麼故事？鍵盤到操做系統、操做系統到瀏覽器、瀏覽器到服務器、服務器返回數據頁面渲染……

鍵盤到操做系統

回車鍵按下時，與鍵盤相關的電路閉合，經過消抖操做，鍵盤的電路系統將回車鍵轉化爲鍵碼13。按鍵被按下會觸發中斷事件，回車鍵的鍵碼被編碼並經過通用串行總線(USB)傳輸到中斷請求線上(IRQ)，中斷控制器接收到IRQ上的信號後，會映射一箇中斷向量。中斷描述符表將中斷向量映射到對應的處理函數上(中斷處理器)。

操做系統到瀏覽器

操做系統經過相應的API函數獲取到當前的活動窗口(該瀏覽器)並獲取到當前瀏覽器地址欄句柄，操做系統使用sendMessage函數將消息添加到地址欄句柄的消息隊列中，sendMessage函數參數將帶有按鍵以及按鍵的信息。而後瀏覽器地址欄句柄的消息處理函數將被調用，處理消息隊列中的消息。

瀏覽器到服務器

處理URL

關鍵字or地址：瀏覽器搜先分析地址欄的內容是關鍵字仍是URL。若地址欄的爲關鍵字，則使用瀏覽器的搜索引擎搜索該關鍵字。當把文字做爲關鍵字傳遞給搜索引擎時，一般會在URL後面加上一個參數，這個參數告訴搜索引擎搜索來自哪一個瀏覽器。

​

HSTS列表: HSTS強制客戶端使用HTTPS與服務器建立鏈接。若訪問的URL在HSTS列表裏，則瀏覽器會把HTTP協議變爲HTTPS。

編碼： 對URL進行Unicode編碼

DNS查詢

瀏覽器處理完URL後，將獲取要訪問的URL所在服務器的地址。這時須要進行DNS查詢。

DNS查詢過程：

1.查詢本地DNS緩存
2.查看本地host表
3.查詢DNS服務器在DNS服務器上進行查詢時，首先查詢本地DNS服務器。若本地DNS 服務器上有域名的緩存，則本地DNS服務器將對應IP發送給查詢方。若本地DNS服務器上沒有域名的緩存，則向根域名服務器發起查詢(遞歸)。根域名服務器收到請求後，會返回下一級域名信息的DNS服務器地址。本地DNS服務器收到地址後繼續進行查詢(迭代)，最後獲取到目標域名的IP併發送給查詢方。

​

TCP鏈接

此時獲取到URL中域名的IP地址，經過協議能夠獲取到端口(HTTP:80、HTTPS:443)，下一步該進行瀏覽器與服務器之間的鏈接。
瀏覽器使用socket函數來進行TCP鏈接，初始化socket時參數爲 AF_INET和SOCK_STREAM。

TCP創建鏈接過程（三次握手）：

1.客戶端發送一個TCP包。設置SYN=1(請求創建鏈接)、Seq=X(隨機產生的序列號)
2.服務器發回確認包(ACK)應答。SYN=一、ACK=一、ACK number = X+一、Seq = Y(隨機產生)
3.客戶端再次發送確認包(ACK) 。SYN=0、ACK=一、ACK number= Y+一、Seq = X+1

​

TCP斷開鏈接過程（四次揮手）：

1.客戶機給服務器一個FIN爲1的TCP報文
2.服務器返回給客戶端一個確認ACK報文
3.服務器給客戶端發送一個FIN報文
4.客戶機回覆ACK報文

​

服務器動做

從瀏覽器發起請求到請求到頁面數據的過程當中，可能會通過負載均衡等中間部分

負載均衡

方式	說明	特色
HTTP重定向	瀏覽器向web服務器請求某個URL後，web服務器能夠經過http響應頭信息中的Location標記來返回一個新的URL	主站點服務器的吞吐率平均分配到了被轉移的服務器;重定向的服務器工做量不一樣，實際的負載量不可估計
DNS負載均衡	在DNS服務器中配置多個A記錄，將這些A記錄對應的服務器構形成集羣,，例如CDN	能夠根據用戶IP選擇最近的服務器，沒法記錄HTTP請求上下文
反向代理	轉發http請求(應用層)，經常使用nginx	全部HTTP請求都必須通過代理，能夠爲不一樣的實際服務器設置不一樣的權重，要求併發處理能力要求高，能夠能夠監控後端服務器
IP負載均衡	網絡層經過修改請求目標地址進行負載均衡(網絡層)	吞吐率高，要求網絡帶寬大

請求處理

1.服務器收到請求後將請求解析爲：請求方法、域名、請求路徑
2.服務器找到該域名對應的虛擬主機，並驗證該虛擬主機是否可使用該請求方法
3.服務器獲取請求路徑對應的內容，並根據內容使用指定的程序來處理(e.g.使用不一樣的程序解析PHP、JSP等文件)，將輸出的結果發送給瀏覽器

PLUS - 請求方法

方法	描述
GET	請求指定的頁面信息，並返回實體主體。
POST	向指定資源提交數據進行處理請求(例如提交表單或者上傳文件)
PUT	從客戶端向服務器傳送的數據取代指定的文檔的內容
HEAD	與get相似，不過返回的響應中沒有具體的內容，用於獲取報頭
DELETE	請求服務器刪除指定的頁面
OPTIONS	返回服務器針對特定資源所支持的HTTP請求方法
TRACE	回顯服務器收到的請求，主要用於測試或診斷
CONNECT	HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器

瀏覽器頁面渲染

瀏覽器收到服務器返回的頁面數據後，開始對頁面進行渲染

瀏覽器進程與線程

瀏覽器是多進程的，用於頁面顯示的有Browser進程、第三方插件進程、GPU進程(3D繪製等)、瀏覽器渲染進程(瀏覽器內核，每一個Tab頁面都有一個渲染進程)。

瀏覽器渲染進程包含的線程：

GUI渲染線程
JS引擎線程
事件觸發線程
定時器觸發器線程
異步http請求線程
注意： JavaScript能夠操做DOM，若是修改元素的時候同時渲染頁面，就可能出現不可預料的結果，因此GUI渲染線程與JS引擎線程是互斥的

瀏覽器渲染頁面過程

1.解析HTML創建dom樹
2.解析css構建render樹（將CSS代碼解析成樹形的數據結構，而後結合DOM合併成render樹）
3.佈局render樹（肯定每一個節點在屏幕上的位置）
4.繪製render樹（遍歷render樹，並使用UI後端層繪製每一個節點）

​

 

​

CSS加載是否會阻塞dom樹渲染？

css加載不會阻塞DOM樹解析
css加載會阻塞render樹渲染

迴流和重繪

迴流：瀏覽器從新渲染部分或所有文檔的過程
重繪：元素改變的樣式不影響元素位置時，瀏覽器將新樣式賦予給元素並從新繪製它的過程

原文出處：

https://blog.csdn.net/qimingweikun/article/details/79506446

---

​

識別圖中二維碼,領取python全套視頻資料