第一步. 在瀏覽器輸入U(xiǎn)RL

URL是什么

• URL: 統(tǒng)一資源定位符音五，Uniform Resource Locator惫撰，用于定位互聯(lián)網(wǎng)上的資源

• URL對(duì)應(yīng)：

  1. 傳送協(xié)議。
  2. 服務(wù)器躺涝。（通常為域名厨钻，有時(shí)為IP地址）
  3. 端口號(hào)。（以數(shù)字方式表示，若為HTTP的默認(rèn)值“:80”可省略）
  4. 路徑夯膀。（以“/”字符區(qū)別路徑中的每一個(gè)目錄名稱）
  5. 查詢诗充。（GET模式的窗體參數(shù)，以“?”字符為起點(diǎn)诱建，每個(gè)參數(shù)以“&”隔開(kāi)其障，再以“=”分開(kāi)參數(shù)名稱與數(shù)據(jù)，通常以UTF8的URL編碼涂佃，避開(kāi)字符沖突的問(wèn)題）
  6. 片段。以“#”字符為起點(diǎn)（URL的井號(hào) - 阮一峰的網(wǎng)絡(luò)日志）

  以http://zh.wikipedia.org:80/w/index.php?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes 為例, 其中：
  http蜈敢，是協(xié)議辜荠；
  zh.wikipedia.org，是服務(wù)器抓狭；
  80伯病，是服務(wù)器上的網(wǎng)絡(luò)端口號(hào)；
  /w/index.php否过，是路徑午笛；
  ?title=Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2&printable=yes，是詢問(wèn)苗桂。
  大多數(shù)網(wǎng)頁(yè)瀏覽器不要求用戶輸入網(wǎng)頁(yè)中“http://”的部分药磺，因?yàn)榻^大多數(shù)網(wǎng)頁(yè)內(nèi)容是超文本傳輸協(xié)議文件。同樣煤伟，“80”是超文本傳輸協(xié)議文件的常用端口號(hào)癌佩，因此一般也不必寫明。一般來(lái)說(shuō)用戶只要鍵入統(tǒng)一資源定位符的一部分（zh.wikipedia.org/wiki/Special:%E9%9A%8F%E6%9C%BA%E9%A1%B5%E9%9D%A2）就可以了便锨。
  由于超文本傳輸協(xié)議允許服務(wù)器將瀏覽器重定向到另一個(gè)網(wǎng)頁(yè)地址围辙，因此許多服務(wù)器允許用戶省略網(wǎng)頁(yè)地址中的部分，比如 www放案。從技術(shù)上來(lái)說(shuō)這樣省略后的網(wǎng)頁(yè)地址實(shí)際上是一個(gè)不同的網(wǎng)頁(yè)地址姚建，瀏覽器本身無(wú)法決定這個(gè)新地址是否通，服務(wù)器必須完成重定向的任務(wù)吱殉。

• http掸冤、https、ftp考婴、file 協(xié)議
  • http : 協(xié)議Hyper Text Transfer Protocol（超文本傳輸協(xié)議）的縮寫,是用于從萬(wàn)維網(wǎng)（WWW:World Wide Web ）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議贩虾。
  • https : 經(jīng)過(guò)加密的http協(xié)議，已達(dá)到不被人攔截
  • ftp : File Transfer Protocol沥阱，文件傳輸協(xié)議
  • file : 訪問(wèn)本地計(jì)算機(jī)中的文件

第二步. 域名解析

對(duì)于 http://jirengu.com的URL缎罢，瀏覽器實(shí)際上不知道 jirengu.com到底是什么東西，需要查找jirengu.com網(wǎng)站所在服務(wù)器的IP地址，才能找到目標(biāo)

為什么要發(fā)明域名策精，不直接用IP?

• 方便記憶對(duì)應(yīng)的網(wǎng)站
• 一個(gè)服務(wù)器上可能部署了多個(gè)網(wǎng)站舰始，只能通過(guò)服務(wù)器+端口的方式，比如101.33.21.104:3000咽袜、101.33.21.104:3001丸卷、101.33.21.104:3002,更難記憶

域名是什么

• 對(duì)于http://jirengu.com:8080/blog , jirengu.com就是域名

IP地址是什么

• 每個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有IP 地址，形如 192.168.0.1
• 局域網(wǎng) IP 和公網(wǎng) IP 是有差別的
  • 局域網(wǎng)IP询刹，比如只裝了路由器谜嫉，還沒(méi)有交網(wǎng)費(fèi)，只建立了本地網(wǎng)絡(luò)凹联，無(wú)法訪問(wèn)外網(wǎng)
  • 公網(wǎng)IP沐兰，由于局域網(wǎng)IP可能是一樣的，所以真正接入互聯(lián)網(wǎng)的都有一個(gè)公網(wǎng)IP蔽挠，任何人訪問(wèn)你的公網(wǎng)IP住闯，都可以訪問(wèn)到服務(wù)器，公網(wǎng)IP是需要申請(qǐng)的
• 127.0.0.1代表本機(jī)的 IP

域名解析的流程

1. 瀏覽器緩存 – 瀏覽器會(huì)緩存DNS記錄一段時(shí)間
2. 系統(tǒng)緩存 - 從 Hosts 文件查找是否有該域名和對(duì)應(yīng) IP
3. 路由器緩存 – 一般路由器也會(huì)緩存域名信息
4. ISP DNS 緩存 – 比如到電信的 DNS 上查找緩存
5. 如果都沒(méi)有找到澳淑，則向根域名服務(wù)器查找域名對(duì)應(yīng) IP比原，根域名服務(wù)器把請(qǐng)求轉(zhuǎn)發(fā)到下一級(jí)定庵，直到找到 IP

電腦上不了網(wǎng)为狸，為什么修改dns為8.8.8.8 或者114.114.114.114?

• 8.8.8.8是google提供的dns服務(wù)器，打不開(kāi)網(wǎng)站可能是環(huán)節(jié)中找不到IP赵颅，若把dns直接改為8.8.8.8則不從以上的那些路徑一一查找氢拥，而是直接從google服務(wù)器查找域名所對(duì)應(yīng)的IP绑改。114.114.114.114（國(guó)內(nèi)一個(gè)較權(quán)威的dns服務(wù)商）同理。

什么是dns劫持兄一？

• dns劫持：又稱域名劫持厘线，是指在劫持的網(wǎng)絡(luò)范圍內(nèi)攔截域名解析的請(qǐng)求，分析請(qǐng)求的域名出革，把審查范圍以外的請(qǐng)求放行造壮，否則返回假的IP地址或者什么都不做使請(qǐng)求失去響應(yīng)，其效果就是對(duì)特定的網(wǎng)絡(luò)不能訪問(wèn)或訪問(wèn)的是假網(wǎng)址骂束。（攻擊根域名服務(wù)器耳璧，使所查找的IP變更為一個(gè)惡意網(wǎng)站IP，危害較大）展箱。

第三步. 服務(wù)器處理

服務(wù)器是一臺(tái)安裝系統(tǒng)的機(jī)器旨枯，常見(jiàn)的系統(tǒng)如Linux、windows server 2012混驰。系統(tǒng)里安裝的處理請(qǐng)求的應(yīng)用叫 Web server攀隔。

Web服務(wù)器

• 常見(jiàn)的 web服務(wù)器有 Apache皂贩、Nginx、IIS昆汹、Lighttpd

• web服務(wù)器接收用戶的Request 交給網(wǎng)站代碼明刷，或者接受請(qǐng)求反向代理到其他 web服務(wù)器

  
  

第四步. 網(wǎng)站處理流程

MVC 模型(model)-視圖(view)-控制器(controller)

第五步. 瀏覽器處理

HTML字符串被瀏覽器接受后被一句句讀取解析

• 解析到link 標(biāo)簽后重新發(fā)送請(qǐng)求獲取css
• 解析到 script標(biāo)簽后發(fā)送請(qǐng)求獲取 js，并執(zhí)行代碼
• 解析到img 標(biāo)簽后發(fā)送請(qǐng)求獲取圖片資源

第六步. 繪制網(wǎng)頁(yè)

瀏覽器根據(jù) HTML 和 CSS 計(jì)算得到渲染樹(shù)满粗，繪制到屏幕上辈末，js 會(huì)被執(zhí)行

參考文章

• 前端經(jīng)典面試題: 從輸入U(xiǎn)RL到頁(yè)面加載發(fā)生了什么？
• 當(dāng)你輸入一個(gè)網(wǎng)址的時(shí)候映皆，實(shí)際會(huì)發(fā)生什么?