原文鏈接：輸入URL到展現(xiàn)頁面的全過程 - 咖啡機（K.F.J） - 博客園
輸入url到展示頁面的全過程
1、域名解析寸士；
2檐什、建立TCP連接；
3弱卡、發(fā)送HTTP請求乃正；
4、瀏覽器響應(yīng)HTTP請求婶博；
5瓮具、瀏覽器渲染頁面；
一凡人、基礎(chǔ)概念
1）TCP/IP是互聯(lián)網(wǎng)相關(guān)的各類協(xié)議族的總稱
2）TCP/IP分為4層：應(yīng)用層名党、傳輸層、網(wǎng)絡(luò)層挠轴、鏈路層
發(fā)送端從應(yīng)用層往下走传睹，接收端從鏈路層往上走。
IP（Internet Protocol）：網(wǎng)絡(luò)協(xié)議位于網(wǎng)絡(luò)層岸晦，IP地址可以和MAC地址配對欧啤。
ARP（Address?Resolution Protocol）：ARP是一種以解析地址的協(xié)議，根據(jù)通信方的IP地址反查出對應(yīng)的MAC地址启上。
Routing：路由選擇邢隧，有點像快遞公司的送貨過程。
TCP（Transmission Control Protocol）：傳輸控制協(xié)議冈在，提供可靠的字節(jié)流傳輸倒慧，將大數(shù)據(jù)分割成報文段（segment），TCP協(xié)議能夠確認(rèn)數(shù)據(jù)最終是否送達到對方包券。
3）數(shù)據(jù)信息包裝
4）域名解析DNS服務(wù)
DNS（Domain Name Sustem）位于應(yīng)用層迫靖，提供域名與IP地址之間的解析服務(wù)。
5）URI與URL
URI（Uniform Resource Identifier）：統(tǒng)一資源標(biāo)識符兴使。
URL（Uniform Resoure Locator）：統(tǒng)一資源定位符系宜，通俗的將就是網(wǎng)址。
URI表示某一互聯(lián)網(wǎng)資源发魄，而URL表示資源地點盹牧，所以URL是URI的子集，下面是幾個URI資源励幼。
6）RFC
RFC（Request For Comments）：征求修正意見書汰寓，RFC是互聯(lián)網(wǎng)的設(shè)計文檔。
要是不按照RFC標(biāo)準(zhǔn)執(zhí)行苹粟，就有可能導(dǎo)致無法通信的狀態(tài)有滑。
7）HTTP
HTTP是無狀態(tài)協(xié)議，協(xié)議對于發(fā)送過的請求或響應(yīng)都不做持久化處理嵌削。
HTTP／1.1為了實現(xiàn)保持狀態(tài)的功能毛好，引入了Cookie望艺。
二、域名解析
在《What really happens when you navigate to a URL》中曾提到DNS會先在緩存中查找記錄肌访。
瀏覽器緩存找默、系統(tǒng)緩存、路由器緩存吼驶、ISP DNS緩存惩激、遞歸搜索。
三蟹演、建立TCP連接
1）發(fā)送端發(fā)送一個帶SYN標(biāo)志的數(shù)據(jù)包給對方
Sequence Number：序號风钻；
Acknowledgment Number：確認(rèn)號。
2）接收端回傳一個帶有SYN和ACK標(biāo)志的數(shù)據(jù)包以示傳達確認(rèn)信息
3）發(fā)送端再回傳一個帶ACK標(biāo)志的數(shù)據(jù)包酒请，代表“握手結(jié)束”
四、發(fā)送HTTP請求
HTTP（Hyper Text Transfer Protocol）：超文本傳輸協(xié)議蚌父，由請求和響應(yīng)構(gòu)成哮兰。
1）請求報文
報文首部內(nèi)容如下：
“Connection:keep-alive”：持久連接，只要任意一端沒有明確提出斷開苟弛，就保持TCP連接狀態(tài)喝滞。
2）響應(yīng)報文
報文首部內(nèi)容如下：
上圖中的200是HTTP狀態(tài)碼
五、服務(wù)器響應(yīng)HTTP請求
從上面的響應(yīng)報文中可以看到服務(wù)器軟件是Nginx膏秫，并且請求的是一張PHP頁面右遭。
1）Apache
Apache對HTTP的請求可以分為連接、處理和斷開連接3個階段缤削。同時也可以分為上圖所示的11個小的階段窘哈。
2）FastCGI
FatCGI可以讓一個客戶端，從網(wǎng)頁瀏覽器向向執(zhí)行在Web服務(wù)器上的程序請求數(shù)據(jù)亭敢。
比如現(xiàn)在請求的是‘index.php’滚婉，根據(jù)配置文件，Apache知道這個不是靜態(tài)文件帅刀，需要去找PHP解析器來處理让腹，那么他會把這個請求簡單處理后交給PHP解析器。
Apache會傳url扣溺、查詢字符串骇窍、POST請求、HTTP header等锥余，而CGI就是規(guī)定要傳哪些數(shù)據(jù)腹纳、以什么樣的格式傳遞給后方處理這個請求的協(xié)議。
3）PHP腳本執(zhí)行
PHP程序完成基本的準(zhǔn)備工作后啟動PHP及Zend引擎， 加載注冊的擴展模塊嘲恍。
初始化完成后讀取腳本文件足画，Zend引擎對腳本文件進行詞法分析，語法分析蛔钙。
編譯成opcode執(zhí)行锌云。
服務(wù)器最終將生成的HTML代碼返回給瀏覽器荠医。
六、瀏覽器渲染頁面
從Chrome的網(wǎng)絡(luò)工具中可以看出彬向，瀏覽器會先下載HTML代碼兼贡，再去下去CSS或JS資源。
渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容娃胆，通常以8K分塊的方式完成遍希，下面是引擎基本流程：
解析HTML以構(gòu)建DOM樹->構(gòu)建Render（渲染）樹->布局Render樹->繪制Render樹
下圖是Webkit的主流程：
瀏覽器在運行JS代碼之前會進行預(yù)解析，首先解析函數(shù)聲明里烦、定義變量凿蒜，解析完成之后再對函數(shù)進行運行、變量進行賦值胁黑。
-不論var聲明的變量處于當(dāng)前作用域的第幾行废封，在預(yù)解析過程中都會被提升到作用域的頂部，并初始化為undefined丧蘸；
-而let聲明的變量同樣不論處于當(dāng)前作用域的第幾行漂洋，都會到作用域的頂部；【但是直接用let聲明變量不賦值是會打印undefined力喷，還是初始化了刽漂，只是let放在賦值之后，let聲明會提前但不會初始化弟孟”戳】
