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

備註：

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

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

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

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

背景

「從瀏覽器中輸入URL到頁面加載的發生了什麼「，這是一道經典的面試題，涉及到的知識面很是多，但做爲一個自認爲對網絡知識掌握的比較好的老碼農來講，回答這個問題天然不在話下。若是這道題目若是在面試出現，對我來講就是送分題啊。儘管如此，我仍是願意花一些時間根據我本身的理解回答一下這個題目，看我本身到底掌握的有多深，同時也把本身的知識梳理一下。

這讓我想起另一件往事，這道題有點相似於「在手機上瀏覽器上輸入一個URL，手機作了一些什麼」，我當時學習通訊裏的核心網時就給本身提出過這個問題。

我很是願意將這個面試題的答案共享出來，一是但願獲得你們的意見，二是也但願對那些不是特別熟的人起到一些幫助。

由於文章較長，我將它們分爲三大部份，後面會提供該文章的完整PDF版本，供你們下載。

從本文裏學到什麼？

正如前面所說，這篇文章涉及到的知識面很是豐富，我相信您絕對能夠從本文裏學到不少基礎知識，還有一些高級話題。

1. DNS的解析原理，經常使用命令，端口等
2. TCP/IP模型，三次握手，四次揮手。
3. HTTP/HTTPS的原理和解析。
4. 瀏覽器render一個頁面
5. Web安全性問題
6. 抓包，分析TCP模型，三次握手，SSL/TLS，讓學起來再也不枯燥。
7. 其餘一些高級話題。

自認爲是目前寫的最詳細的一篇文章了，由於裏面有理論，有實戰，應該會起到一個比較好的效果。

總概: 幾大步驟

總的來講，當你輸入在瀏覽器裏輸入一個URL到頁面加載，發生的順序以下：

1. DNS查詢
2. TCP鏈接
3. 發送HTTP請求
4. Server處理HTTP請求並返回HTTP報文
5. 瀏覽器解析並render頁面
6. HTTP鏈接斷開

後面將對以上步驟詳細介紹。

DNS查詢

DNS解析流程

假設輸入的URL是包含域名的，那確定會涉及到DNS解析。固然，若是URL僅僅是IP，那就不會涉及到DNS的。域名的出現是爲了方便記憶，由於域名比IP好記。咱們這裏假設URL包含域名。

解析的步驟大體以下圖：

 

首先，在 本地域名服務器中根據域名查詢IP地址，若是沒有找到的狀況下，本地域名服務器會向 根域名服務器發送一個請求。

若是根域名服務器也不存在該域名時，本地域名會向com 頂級域名服務器（TLD）發送一個請求，依次類推下去。

直到最後本地域名服務器獲得google的IP地址並把它緩存到本地，供下次查詢使用。

 

能夠參考頁面 https://www.verisign.com/en_US/website-presence/online/how-dns-works/index.xhtml ，該頁面詮釋了DNS的過程。

須要說明的是Root DNS Server通常有13個，後面有個點（.），別忘了。

a.root-servers.net.

c.root-servers.net.

j.root-servers.net.

b.root-servers.net.

i.root-servers.net.

d.root-servers.net.

k.root-servers.net.

f.root-servers.net.

l.root-servers.net.

h.root-servers.net.

m.root-servers.net.

g.root-servers.net.

e.root-servers.net.

DNS的優化

咱們發現，一個DNS查詢在沒有緩存的狀況下會有6步，這將是一個耗時的過程，若是DNS 查詢時間過長，甚至會影響到用戶體驗。

 

那麼現階段是怎麼優化的呢？緩存。DNS是存在着多級緩存，從離瀏覽器的距離排序的話，有如下幾種: 瀏覽器緩存，系統緩存，路由器緩存，IPS服務器緩存，根域名服務器緩存，頂級域名服務器緩存，主域名服務器緩存。

 

咱們以Chrome爲例子，輸入 chrome://net-internals/#dns，咱們會看到以下界面：

這裏的Capacity: 1000，表明緩存1K條，那麼每條記錄緩存多久呢？參看

timeout 1

這裏的1表明1分鐘。

若是是系統緩存，通常分2種狀況：

 

Linux 操做系統

見下圖，通常在/etc/hosts下。

 

 

Windows操做系統

通常在 C:\Windows\System32\Drivers\etc\hosts。

 

談到這裏，我給你們 分享一個特別有用的技巧。

咱們在作開發和測試時，會有一種狀況，常常會去訪問某個（測試）URL，例如 http://192.168.1.8:8080/admin/login, 若是這樣的話，咱們極有可能存在一個問題，以爲每次輸入ip真的很麻煩。怎麼解決？那麼咱們能夠這麼作，利用DNS的原理，將某個僞hostname（abc-test）加入到hosts裏，只需加入一條記錄：

192.168.1.8． abc-test

這樣就能夠用 http://abc-test:8080/admin/login去訪問了，簡單易用，對吧。

DNS負載均衡

不知道你們有沒有注意或思考過一個問題，Google在全球都有服務器，不一樣的國家或區域訪Google，是否是都很快，這就是Google GSLB的做用。也就是說不一樣的區域訪問Google返回的IP是不同的，甚至在同一個辦公室訪問Google，返回回來的IP也有多是不同的。

爲何呢？這裏用的就是DNS負載均衡，否則Google怎麼去支持全球幾十億客戶的請求呢。總之，DNS會根據你的位置或IP返回一個合適的IP給你用。除了Google，一些CDN的SP例如Akamai、AWS、Azure、阿里雲都有相似的服務。

DNS Record（記錄）

DNS記錄是一個很是重好的概念。DNS記錄類型以下表。

記錄類型	含義簡介
A（Address）	指定域名對應的IPv4地址
AAAA	指定域名對應的IPv6地址
NS（Name Server）	指定該域名由哪一個DNS服務器來進行解析
MX（Mail Exchanger）	郵件交換記錄，用於電子郵件系統發郵件時根據收信人的地址後綴來定位郵件服務器
CNAME	別名記錄，多個域名映射到同一臺計算機（如同一主機提供mail和www服務）
TXT	主機名或域名的說明
TTL（Time-To-Live）	DNS服務器中保存的時間
PTR	將一個主機地址映射到對應的域名
HINFO	說明映射到特定 DNS 主機名的 CPU 類型和操做系統類型

 

在這裏只介紹經常使用的A Record， CNAME，MX，NS。

 

A記錄

A記錄是用的最多的一種類型。

A (Address) 記錄是用來指定主機名（或域名）對應的IP地址記錄。用戶能夠將該域名下的網站服務器指向到本身的Web Server上。

同時也能夠設置該域名的子域名。通俗來講A記錄就是服務器的IP,域名綁定A記錄就是告訴DNS,當你輸入域名的時候給你引導向設置在DNS的A記錄所對應的服務器。

後面的抓包分析會對A記錄進行分析，讓您有直觀認識。

 

CNAME記錄

CNAME記錄是另外一種用的比較多的記錄，能夠將一個域名或者子域名指向另一個主機名。

 

最經常使用的使用場景是什麼呢？沒錯，CDN就是這種方式。舉個例子，例如公司A想把本身的圖片放在Akamai的CDN上，A的子域名是img.abc.com, 而 Akamai的CDN服務域名是img.akaimacdn.com. 可是A公司指望用本身的域名嗎，而不是Akamai的域名。爲了實現這個目標，怎麼辦？是的，使用CNAME，只須要將子域名img.abc.com指向到img.akaimacdn.com。問題又來了，在哪裏設置呢？確定是在公司A這邊的DNS server上，而不是Akamai那邊。

後面的抓包分析會對MX進行分析，讓您有直觀認識。

 

MX記錄

MX（Mail Exchanger）記錄，字面意思很直觀，知道它用來作郵件路由，用戶能夠將域名下的郵件服務器指向到本身的郵件服務器上，而後能夠本身操控全部的郵箱設置。因此只需在線填寫服務器的IP地址，便可以將域名下的郵件所有轉到您本身設定相應的郵件服務器上。

 

NS記錄 

NS記錄用來解析服務器記錄，代表由哪臺服務器對該域名進行解析，這裏的NS記錄只對子域名生效。

例如用戶但願由12.34.56.78這臺服務器解析sub1.mydomain.com，則須要設置 sub1.mydomain.com的NS記錄。

這裏涉及到一個問題，細心的咱們會發現A記錄也有該功能，這裏就涉及到優先級的問題了。NS記錄優先於A記錄。若是一個主機地址同時存在NS記錄和A記錄，則A記錄不生效。

 

DNS經常使用命令和工具

只介紹2個經常使用的命令dig和nslookup。

 

dig

dig是一個DNS查詢工具。

 

[warren]$ dig   ; <<>> DiG 9.9.5-3ubuntu0.16-Ubuntu <<>> ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 57775 ;; flags: qr rd ra ad; QUERY: 1, ANSWER: 13, AUTHORITY: 0, ADDITIONAL: 1   ;; OPT PSEUDOSECTION: ; EDNS: version: 0, flags:; udp: 4096 ;; QUESTION SECTION: ;.                              IN      NS   ;; ANSWER SECTION: .                       16265   IN      NS      a.root-servers.net. .                       16265   IN      NS      c.root-servers.net. .                       16265   IN      NS      j.root-servers.net. .                       16265   IN      NS      b.root-servers.net. .                       16265   IN      NS      i.root-servers.net. .                       16265   IN      NS      d.root-servers.net. .                       16265   IN      NS      k.root-servers.net. .                       16265   IN      NS      f.root-servers.net. .                       16265   IN      NS      l.root-servers.net. .                       16265   IN      NS      h.root-servers.net. .                       16265   IN      NS      m.root-servers.net. .                       16265   IN      NS      g.root-servers.net. .                       16265   IN      NS      e.root-servers.net.   ;; Query time: 0 msec ;; SERVER: 208.113.157.202#53(208.113.157.202) ;; WHEN: Thu Nov 29 18:04:06 PST 2018 ;; MSG SIZE  rcvd: 239

 

再看看dig 京東的域名 www.jd.com 會有什麼效果。

dig www.jd.com   ; <<>> DiG 9.10.6 <<>> www.jd.com ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 2675 ;; flags: qr rd ra; QUERY: 1, ANSWER: 3, AUTHORITY: 0, ADDITIONAL: 0   ;; QUESTION SECTION: ;www.jd.com.                   IN    A   ;; ANSWER SECTION: www.jd.com.            300  IN    CNAME    www.jd.com.gslb.qianxun.com. www.jd.com.gslb.qianxun.com. 300 IN CNAME    www.jdcdn.com. www.jdcdn.com.        300  IN    A     61.174.55.1   ;; Query time: 3 msec ;; SERVER: 192.168.1.1#53(192.168.1.1) ;; WHEN: Fri Nov 30 10:07:37 CST 2018 ;; MSG SIZE  rcvd: 106

紅色部分爲有CNAME記錄和A記錄。

 

nslookup

nslookup適用於Windows，Linux，macOS等操做系統。

nslookup www.jd.com Server:            192.168.1.1 Address:   192.168.1.1#53   Non-authoritative answer: www.jd.com      canonical name = www.jd.com.gslb.qianxun.com. www.jd.com.gslb.qianxun.com    canonical name = www.jdcdn.com. Name:      www.jdcdn.com Address: 61.174.55.1

 

 

DNS抓包分析

說了這麼多，有些同窗可能仍是以爲只有概念，無法徹底理解。因此，咱們仍是來點實戰更爲實際，這也是我更進一步瞭解DNS的工做方式，由於在我看來想了解根本，最有效的方法是抓包，而後深刻查探DNS的packet。

 

本文都會使用Wireshark，相信你們都用過這個工具吧。若是沒用過，能夠下載一個，入門很簡單的，別擔憂。

 

A記錄

下面是抓包圖，過濾條件是dns，即protocol爲DNS。

 

請參看第89和90包，這是查詢 www.jd.com 的request和response。

 

第89包細節圖以下：

咱們能夠看到上圖，Name是 www.jd.com, Type是A記錄。

 

 

另外，咱們能夠看到其餘信息， DNS是經過UDP傳送。其實，有時候也是經過TCP來傳送。那麼何時用TCP，何時用UDP？很簡單，當response的packet大於512字節時，就用TCP，反之，則用UDP。再回頭看着89包，長度爲70，因此用UDP了。那多問一個問題，什麼狀況下DNS查詢包超過512？CNAME就有可能。能夠參考下面的CNAME抓包。

 

端口是多少呢？53，是的， DNS用的是53端口，很是重要，通常防火牆要打開，不然DNS解析不了，也意味着沒法訪問域名的website。

 

那麼返回什麼呢？繼續看第90包。

咱們能夠看到 www.jd.com 的DNS A記錄，IP地址是61.174.55.1。

 

CNAME

下圖是查詢 www.taobao.com 的抓包。

咱們看到 www.taobao.com 轉到了 www.taobao.com.danuoyi.tbcache.com。

同時咱們也能夠看到 www.taobao.com.danuoyi.tbcache.com 有多條A記錄，這裏就是傳說的DNS 負載均衡。

DNS標準和協議

DNS是有標準和協議的，就跟HTTP相似的。DNS標準和協議在IETF裏。你們能夠參考 https://en.wikipedia.org/wiki/Domain_Name_System 的 RFC documents部分。

我認爲學習協議，框架，或技術，最佳的方法就是閱讀官方資料。例如，這裏學習DNS能夠直接看RFC文檔，學習Angular，能夠訪問其官網。

DNS 10問

若是面試，下面10問基本能夠覆蓋全了，答案在上面已經說過了：

1.     爲何要用域名？

2.    DNS解析的基本流程？

3.    DNS的根域名是什麼，有幾個Server？TLD DNS是什麼？

4.    DNS的優化策略是什麼？在各個環節怎麼作的？Chrome和各個操做系統怎麼作的？

5.    DNS負載均衡是什麼，爲何要用？

6.    DNS的記錄類型有哪些？CNAME通常用在哪些場合？舉例子說明一下。

7.    DNS的經常使用工具和命令有哪些？

8.    DNS查詢是用TCP仍是UDP？通常用哪一個端口？

9.    DNS抓包抓過嗎？Wireshark有用過嗎？

10.  請說明一下 www.google.com 和google.com的區別，如何設置它們的DNS？

 

本章介紹完DNS，下一章節介紹TCP/IP，三次握手，四次揮手，以及SSL/TLS，內容絕對不能錯過。