深刻淺出經典面試題：從瀏覽器中輸入URL到頁面加載發生了什麼 - Part 2

時間 2019-11-05

標籤深刻經典面試瀏覽器輸入 url 頁面加載發生了什麼欄目快樂工作简体版

原文原文鏈接

備註：html

由於文章太長，因此將它分爲三部分，本文是第二部分。git

第一部分：深刻淺出經典面試題：從瀏覽器中輸入URL到頁面加載發生了什麼 - Part 1github

第二部分：深刻淺出經典面試題：從瀏覽器中輸入URL到頁面加載發生了什麼 - Part 2面試

第三部分：深刻淺出經典面試題：從瀏覽器中輸入URL到頁面加載發生了什麼 - Part 3編程

TCP鏈接

DNS解析返回域名的IP以後，接下來就是瀏覽器要和該IP創建TCP鏈接了。爲何是TCP而不是UDP？那是由於HTTP是基於TCP上的。這裏涉及到另一個話題：TCP/IP 模型。這個已經在大學的課本上學過了，咱們再複習一下。

TCP/IP模型

TCP/IP模型通常分爲4層，下面是我用PPT畫的。

在這裏不得不說OSI七層參考模型，它和TCP/IP模型的區別和聯繫，繼續用PPT畫，見下圖：

很少解釋，OSI的7/6/5層和TCP/TP的應用層對應，2/1層和鏈路層對應。在實際的應用中，主要仍是TCP/IP概念模型，後面的內容主要講它。瀏覽器

這些都是課本上的，也許忘了（畢竟不是每天用到這些嘛），不要緊，咱們以最簡單的方式來說解。爲了便於理解每層的含義和做用，先看每層有哪些協議，看看有沒有本身熟悉的協議。有熟悉的協議，先體會一下。

應用層

咱們能夠看到，有經常使用的HTTP/HTTPS/IMAP/SSH/Telnet等都在應用層上（題外話，這一層你用的協議越多，說明你知識越開闊）。相信每一個人都用過HTTP/HTTPS，因此我上面說HTTP/HTTP是基於TCP上的。

Wikipedia 這麼解釋：

The application layer is the scope within which applications create user data and communicate this data to other applications on another or the same host. The applications, or processes, make use of the services provided by the underlying, lower layers, especially the Transport Layer which provides reliable or unreliable pipesto other processes. The communications partners are characterized by the application architecture, such as the client-server model and peer-to-peer networking. This is the layer in which all higher level protocols, such as SMTP, FTP, SSH, HTTP, operate. Processes are addressed via ports which essentially represent services.

傳輸層

沒錯，最多見的TCP和UDP就在這裏，TCP三次握手也在這裏。

Wikipedia 這麼解釋：

The transport layer performs host-to-host communications on either the same or different hosts and on either the local network or remote networks separated by routers. [22] It provides a channel for the communication needs of applications. UDP is the basic transport layer protocol, providing an unreliable datagram service. The Transmission Control Protocol provides flow-control, connection establishment, and reliable transmission of data.

IP層

IP層很是重要，可能這麼說還不太懂，看看其餘協議。你們知道ICMP嗎？估計不少人仍是說不上來ICMP是什麼東西。你們確定用過ping命令吧，它就是用的ICMP。說到這裏，應該有感性的認識了吧。

Wikipedia 這麼解釋：

The internet layer exchanges datagrams across network boundaries. It provides a uniform networking interface that hides the actual topology (layout) of the underlying network connections. It is therefore also referred to as the layer that establishes internetworking. Indeed, it defines and establishes the Internet. This layer defines the addressing and routing structures used for the TCP/IP protocol suite. The primary protocol in this scope is the Internet Protocol, which defines IP addresses. Its function in routing is to transport datagrams to the next IP router that has the connectivity to a network closer to the final data destination.

鏈路層

這個很是底層了，ARP，NDP，Ethernet都很常見，若是認真看過HTTP抓包，熟悉LVS，Ngnix等提供的負載均衡，應該對ARP不陌生，是的ARP用來查找設備的MAC地址，在LVS作負載均衡時會用到，由於進來的stream的包MAC地址要和出去的Stream包的MAC地址保持一致，由於作負載均衡，有可能會變化，如何解決這個問題，則不在本文的討論範圍內，若有興趣能夠參看LVS的文檔。

Wikipedia 這麼解釋：

The link layer defines the networking methods within the scope of the local network link on which hosts communicate without intervening routers. This layer includes the protocols used to describe the local network topology and the interfaces needed to effect transmission of Internet layer datagrams to next-neighbor hosts.

TCP/IP抓包分析

看了前面的內容，仍是以爲抽象嗎？若是是，沒關係，也在預期內。讓咱們抓個包，分析認識一下就清楚了。

先訪問 www.qq.com 這個主頁，抓到的包以下：

看到這裏，應該開始有感受了吧。

HTTP，即應用層，正在訪問js.aq.qq.com.

TCP層，src port是62957， dst port是80端口，由於js.aq.qq.com的端口是80。

IP層，用的是IPV4，個人計算機IP地址是192.168.1.2，目標IP是180.153.105.248.

鏈路層，我使用的是Apple電腦，個人MAC地址我隱藏了，對端是ZTE設備。

再截幾個圖你們仔細看一下。

鏈路層

IP層

TCP層

應用層（HTTP）

在這裏不加以詳解，後面會對TCP以及HTTP層詳詳細說明。

TCP三次握手與四次揮手

如下部份內容節選自 https://hit-alibaba.github.io/interview/basic/network/TCP.html。

TCP三次握手

所謂三次握手(Three-way Handshake)，是指創建一個 TCP 鏈接時，須要客戶端和服務器總共發送3個包。

三次握手的目的是鏈接服務器指定端口，創建 TCP 鏈接，並同步鏈接雙方的序列號和確認號，交換 TCP 窗口大小信息。在 socket 編程中，客戶端執行 connect() 時。將觸發三次握手。

· 第一次握手(SYN=1, seq=x):

客戶端發送一個 TCP 的 SYN 標誌位置1的包，指明客戶端打算鏈接的服務器的端口，以及初始序號 X,保存在包頭的序列號(Sequence Number)字段裏。

發送完畢後，客戶端進入 SYN_SEND 狀態。

· 第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1):

服務器發回確認包(ACK)應答。即 SYN 標誌位和 ACK 標誌位均爲1。服務器端選擇本身 ISN 序列號，放到 Seq 域裏，同時將確認序號(Acknowledgement Number)設置爲客戶的 ISN 加1，即X+1。發送完畢後，服務器端進入 SYN_RCVD 狀態。

· 第三次握手(ACK=1，ACKnum=y+1)

客戶端再次發送確認包(ACK)，SYN 標誌位爲0，ACK 標誌位爲1，而且把服務器發來 ACK 的序號字段+1，放在肯定字段中發送給對方，而且在數據段放寫ISN的+1

發送完畢後，客戶端進入 ESTABLISHED 狀態，當服務器端接收到這個包時，也進入 ESTABLISHED狀態，TCP 握手結束。

三次握手的過程的示意圖以下：

確實比較抽象，讓咱們繼續經過抓包來分析(訪問baidu.com)

這裏有三個包。

192.168.1.2是我機器的IP，115.239.211.112是baidu的IP，是否是和上圖一致。

具體看270包，192.168.1.2 發送SYN到115.239.211.112，seq=0；

以下圖：

274包圖，115.239.211.112返回SYN 和ACK給192.168.1.2， seq =0，可是ACK等於SYN裏的seq（爲0）+1，因此爲1

275包圖，192.168.1.2收到ACK包後，給115.239.211.112再回一個ACK，ACK#爲1：

對於協議的理解，仍是多觀察，多比對，就知道是怎麼回事了。

TCP四次揮手

TCP 鏈接的拆除須要發送四個包，所以稱爲四次揮手(Four-way handshake)，也叫作改進的三次握手。客戶端或服務器都可主動發起揮手動做，在 socket 編程中，任何一方執行 close() 操做便可產生揮手操做。

· 第一次揮手(FIN=1，seq=x)

假設客戶端想要關閉鏈接，客戶端發送一個 FIN 標誌位置爲1的包，表示本身已經沒有數據能夠發送了，可是仍然能夠接受數據。

發送完畢後，客戶端進入 FIN_WAIT_1 狀態。

· 第二次揮手(ACK=1，ACKnum=x+1)

服務器端確認客戶端的 FIN 包，發送一個確認包，代表本身接受到了客戶端關閉鏈接的請求，但尚未準備好關閉鏈接。

發送完畢後，服務器端進入 CLOSE_WAIT 狀態，客戶端接收到這個確認包以後，進入 FIN_WAIT_2 狀態，等待服務器端關閉鏈接。

· 第三次揮手(FIN=1，seq=y)

服務器端準備好關閉鏈接時，向客戶端發送結束鏈接請求，FIN 置爲1。

發送完畢後，服務器端進入 LAST_ACK 狀態，等待來自客戶端的最後一個ACK。

· 第四次揮手(ACK=1，ACKnum=y+1)

客戶端接收到來自服務器端的關閉請求，發送一個確認包，並進入 TIME_WAIT狀態，等待可能出現的要求重傳的 ACK 包。

服務器端接收到這個確認包以後，關閉鏈接，進入 CLOSED 狀態。

客戶端等待了某個固定時間（兩個最大段生命週期，2MSL，2 Maximum Segment Lifetime）以後，沒有收到服務器端的 ACK ，認爲服務器端已經正常關閉鏈接，因而本身也關閉鏈接，進入 CLOSED 狀態。

四次揮手的示意圖以下：

這裏就不抓包了，能夠自行抓包對比看看。

HTTPS證書

愈來愈多的網站開始使用HTTPS（Apple要求App都須用HTTPS）。對於HTTPS，須要有一個SSL/TLS的鑑權/認證，才能創建TCP連接。

下圖描述了HTTP和HTTPS的區別。

關於SSL/TLS如何交互等，能夠參看阮一峯老師的文章 http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html 和 http://www.ruanyifeng.com/blog/2014/09/illustration-ssl.html，寫很是清楚的。

借用一張阮一峯老師的圖：

(該圖來自於https://blog.cloudflare.com/keyless-ssl-the-nitty-gritty-technical-details/)

咱們仍是抓包體會一下。

對着阮一峯老師圖片的流程看：

273包： Client 發送Client Hello給Server。

278包： Server回Server Hello給Client。

283包： Server繼續回Server Certificate給Client，要交換證書。

294包：Server繼續回Server Key Exchange，交換key。

295包：Server返回Server Hello Done。

截止這裏，Server已經作了很多事，接下來輪到Client了。

298包：Client Key Exchange，Change Cipher Spec，Encrypted Handshake Message。到這裏就結束了。

咱們再仔細看看Client Hello的273包，注意標記部分.

接下來再看看Extension，有不少對不對。這裏專門說一下 SNI（Server Name Indication）, server_name, 咱們能夠看見它的值是 www.baidu.com. 也就是說瀏覽器發送過來的證書是給baidu這個域名簽發的。SNI用來校驗該證書是否是爲server name提供的域名簽發的。若是不是，就會報錯。

有一種狀況特別須要注意，在早期版本的瀏覽器或者HTTP客戶端，SNI可能不包含在該包裏的，那麼怎麼處理呢？若是Server端只有一個證書部署，那簡單，就是按照部署的那個證書去判斷。若是有多個證書部署呢？好比部署了aaa.com bbb.com ccc.com 三個域名的證書，那麼就會按照缺省的去匹配，取決於軟件（Apache，Tomcat等）和硬件（F5，Netscaler）怎麼配置了。

可是若是已經商用，去改默認配置，會對商用服務有影響，那麼可不能夠在Client有一些改進呢？若是您正在使用某個HTTP library，能夠考慮升級版本是否支持。