淺議從URL輸入到頁(yè)面展現(xiàn)
圖片
什么是URL
url是統(tǒng)一資源定位符匕争，對(duì)可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡(jiǎn)潔的表示葵擎，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址胳蛮∮液耍互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL慧脱，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。 [1]
它最初是由蒂姆·伯納斯·李發(fā)明用來作為萬維網(wǎng)的地址『睾龋現(xiàn)在它已經(jīng)被萬維網(wǎng)聯(lián)盟編制為互聯(lián)網(wǎng)標(biāo)準(zhǔn)RFC1738了菱鸥。
一宗兼、在瀏覽器的地址欄中敲入了url
結(jié)構(gòu)（一）
基本URL包含模式（或稱協(xié)議）、服務(wù)器名稱（或IP地址）氮采、路徑和文件名殷绍，如“協(xié)議://授權(quán)/路徑?查詢”。完整的鹊漠、帶有授權(quán)部分的普通統(tǒng)一資源標(biāo)志符語法看上去如下：協(xié)議://用戶名:密碼@子域名.域名.頂級(jí)域名:端口號(hào)/目錄/文件名.文件后綴?參數(shù)=值#標(biāo)志主到。
簡(jiǎn)單可以理解為：協(xié)議類型://<主機(jī)名IP>:<端口>/<路徑>/文件名
協(xié)議類型（scheme）最常用的有超文本傳輸協(xié)議（Hypertext Transfer Protocol，縮寫為HTTP）也就是我們所說的HTTP協(xié)議躯概，協(xié)議如下：
| 協(xié)議類型 | 中文名稱 | 默認(rèn)端口號(hào) |
|---|---|---|
| http | 超文本傳輸協(xié)議資源 | 80 |
| https | 用安全套接字層傳送的超文本傳輸協(xié)議 | 443 |
| ftp | 文件傳輸協(xié)議 | 21 |
| TELNET | 遠(yuǎn)程終端協(xié)議 | 23 |
以上四個(gè)比較常見 其它的還有
-mailto——電子郵件地址
-ldap——輕型目錄訪問協(xié)議搜索
-file——當(dāng)?shù)仉娔X或網(wǎng)上分享的文件
-news——Usenet新聞組
-gopher——Gopher協(xié)議
結(jié)構(gòu)（二）
IP是因特網(wǎng)中的每臺(tái)連接到網(wǎng)絡(luò)的計(jì)算機(jī)為實(shí)現(xiàn)相互通信而遵循的規(guī)則協(xié)議登钥。每個(gè)處于互聯(lián)網(wǎng)中的設(shè)備都有IP 地址，形如 192.168.0.1娶靡，而127.0.0.1代表本機(jī)的 IP怔鳖。IP又分為局域網(wǎng)IP和公網(wǎng)IP。而局域網(wǎng) IP 和公網(wǎng) IP 是有差別的固蛾。每個(gè)網(wǎng)站就是靠IP來定位的结执。
為了便于記憶或辨識(shí)，人們使用域名來登錄網(wǎng)站艾凯，每個(gè)域名背后有對(duì)應(yīng)的IP地址献幔。
比如對(duì)于 http://www.reibang.com的URL，瀏覽器實(shí)際上不知道 www.reibang.com到底是什么東西趾诗，需要查找www.reibang.com網(wǎng)站所在服務(wù)器的IP地址蜡感，才能找到目標(biāo)，這就是下文要說的域名解析恃泪。
二郑兴、域名解析
根據(jù)URL，在本地DNS緩存中查找域名對(duì)應(yīng)的IP地址
1-查找瀏覽器緩存
瀏覽器和操作系統(tǒng)在獲取網(wǎng)站域名的實(shí)際IP地址后會(huì)對(duì)其IP進(jìn)行緩存贝乎，在短時(shí)間內(nèi)重復(fù)訪問同一域名時(shí)情连，會(huì)直接在DNS緩存中讀取域名對(duì)應(yīng)的IP地址，以減少網(wǎng)絡(luò)請(qǐng)求的損耗（先在瀏覽器DNS緩存中查找览效，如果沒有找到却舀，則會(huì)在操作系統(tǒng)DNS緩存中查找）。瀏覽器和操作系統(tǒng)都有一個(gè)固定的DNS緩存時(shí)間锤灿，其中Chrome的過期時(shí)間是1分鐘挽拔，在這個(gè)期限內(nèi)不會(huì)重新請(qǐng)求DNS。Chrome瀏覽器看本身的DNS緩存時(shí)間比較方便但校，在地址欄輸入:
2-查找操作系統(tǒng)緩存(查詢hosts文件)
如果在本地DNS緩存中沒有找到域名對(duì)應(yīng)的IP地址螃诅，則會(huì)查詢hosts文件，看其中是否已經(jīng)有與當(dāng)前域名對(duì)應(yīng)的 IP 地址，如果有就會(huì)直接采用术裸，如果沒有空执，那么就得由DNS服務(wù)器進(jìn)行域名解析完成域名與IP的轉(zhuǎn)換工作。
3-查找路由器緩存
如果系統(tǒng)緩存中也找不到穗椅，那么查詢請(qǐng)求就會(huì)發(fā)向路由器辨绊，路由器一般會(huì)有自己的DNS緩存。
4-查找ISP(Internet Service Provider) DNS 緩存
如果路由器緩存中也找不到匹表，那么就查詢ISP DNS 緩存服務(wù)器了门坷。
我們都知道在我們的網(wǎng)絡(luò)配置中都會(huì)有"DNS服務(wù)器地址"這一項(xiàng)，操作系統(tǒng)會(huì)把這個(gè)域名發(fā)送給這里設(shè)置的DNS袍镀，比如114.114.114.114,也就是本地區(qū)的域名服務(wù)器默蚌，通常是提供給你接入互聯(lián)網(wǎng)的應(yīng)用提供商。而114.114.114.114是國(guó)內(nèi)移動(dòng)苇羡、電信和聯(lián)通通用的DNS绸吸。
5-迭代查詢
如果前面都找不到DNS緩存的話，會(huì)有以下幾個(gè)步驟：
-本地 DNS服務(wù)器將該請(qǐng)求轉(zhuǎn)發(fā)到互聯(lián)網(wǎng)上的根域（根域沒有名字设江，在DNS系統(tǒng)中就用一個(gè)空字符串來表示锦茁。例如www.baidu.com.現(xiàn)在的DNS系統(tǒng)都不會(huì)要求域名以.來結(jié)束，即www.baidu.com就可以解析了叉存，但是現(xiàn)在很多DNS解析服務(wù)商還是會(huì)要求在填寫DNS記錄的時(shí)候以.來結(jié)尾域名码俩。）
-根域?qū)⑺樵冇蛎械捻敿?jí)域（比如要查詢www.baidu,com，該域名的頂級(jí)域就是com）的服務(wù)器IP地址返回到本地DNS歼捏。
-本地DNS根據(jù)返回的IP地址稿存，再向頂級(jí)域（就是com域）發(fā)送請(qǐng)求， com域服務(wù)器再將域名中的二級(jí)域（即www.baidu.com中的baidu.com）的IP地址返回給本地DNS瞳秽。
-本地DNS再向二級(jí)域發(fā)送請(qǐng)求進(jìn)行查詢瓣履。
之后不斷重復(fù)這樣的過程，直到本地DNS服務(wù)器得到最終的查詢結(jié)果练俐，并返回到主機(jī)袖迎。這時(shí)候主機(jī)才能通過域名訪問該網(wǎng)站。
下圖能很好的說明這個(gè)迭代查詢:
當(dāng)查找到對(duì)應(yīng)的IP地址之后痰洒，通過IP地址查找到對(duì)應(yīng)的服務(wù)器瓢棒，瀏覽器將用戶發(fā)起的http請(qǐng)求發(fā)送給服務(wù)器。例如：GET http://www.baidu.com/ HTTP/1.1
三丘喻、服務(wù)器處理請(qǐng)求
瀏覽器與服務(wù)器建立連接，并發(fā)送請(qǐng)求給服務(wù)器
每臺(tái)服務(wù)器上都會(huì)安裝處理請(qǐng)求的應(yīng)用——Web server念颈。常見的web server產(chǎn)品有apache泉粉、nginx、IIS、Lighttpd等嗡靡。
當(dāng)web server接收到一個(gè)HTTP請(qǐng)求(request)跺撼，會(huì)返回一個(gè)HTTP響應(yīng)(response)，例如送回一個(gè)HTML頁(yè)面讨彼。對(duì)于不同用戶發(fā)送的請(qǐng)求歉井，會(huì)結(jié)合配置文件，把不同請(qǐng)求委托給服務(wù)器上處理對(duì)應(yīng)請(qǐng)求的程序進(jìn)行處理（例如CGI腳本哈误，JSP腳本哩至，servlets，ASP腳本蜜自，服務(wù)器端JavaScript菩貌，或者一些其它的服務(wù)器端技術(shù)等）。
無論它們(腳本)的目的如何重荠，這些服務(wù)器端(server-side)的程序通常產(chǎn)生一個(gè)HTML的響應(yīng)(response)來讓瀏覽器可以瀏覽箭阶。
那么如何處理請(qǐng)求？實(shí)際上就是后臺(tái)處理的工作戈鲁。后臺(tái)開發(fā)現(xiàn)在有很多框架仇参，但大部分都還是按照MVC設(shè)計(jì)模式進(jìn)行搭建的。
處理過程圖：
MVC的處理過程是這樣的：對(duì)于每一個(gè)用戶輸入的請(qǐng)求婆殿，首先被控制器接收冈敛，控制器決定用哪個(gè)模型來進(jìn)行處理，然后模型用業(yè)務(wù)邏輯來處理用戶的請(qǐng)求并返回?cái)?shù)據(jù)鸣皂，最后控制器確定用哪個(gè)視圖模型抓谴，用相應(yīng)的視圖格式化模型返回html字符串給瀏覽器，并通過顯示頁(yè)面呈現(xiàn)給用戶寞缝。
四癌压、瀏覽器處理
瀏覽器收到來自服務(wù)器的響應(yīng)后，會(huì)將響應(yīng)中的HTML字符串一句句讀取解析荆陆，解析到link標(biāo)簽后重新發(fā)送請(qǐng)求下載css文件滩届，解析到script標(biāo)簽后重新發(fā)送請(qǐng)求下載js文件，并執(zhí)行代碼被啼，解析到img標(biāo)簽后重新發(fā)送請(qǐng)求獲取圖片資源帜消。
瀏覽器根據(jù)html、css計(jì)算得到渲染樹浓体，結(jié)合相關(guān)js的執(zhí)行結(jié)果泡挺，最終將網(wǎng)頁(yè)繪制到屏幕上。
-加載
瀏覽器對(duì)一個(gè)html頁(yè)面的加載順序是從上而下的命浴。如果加載過程中遇到外部css文件娄猫，瀏覽器另外發(fā)出一個(gè)請(qǐng)求贱除，來獲取css文件。遇到圖片資源媳溺，瀏覽器也會(huì)另外發(fā)出一個(gè)請(qǐng)求月幌，來獲取圖片資源。但是當(dāng)文檔加載過程中遇到j(luò)s文件悬蔽，html文檔會(huì)掛起渲染（加載解析渲染同步）的線程扯躺，不僅要等待文檔中js文件加載完畢，還要等待解析執(zhí)行完畢蝎困，才可以恢復(fù)html文檔的渲染線程录语。
-解析
解析文檔是指將文檔轉(zhuǎn)化成為有意義的結(jié)構(gòu)，也就是可讓代碼理解和使用的結(jié)構(gòu)难衰。解析得到的結(jié)果通常是代表了文檔結(jié)構(gòu)的節(jié)點(diǎn)樹钦无，它稱作解析樹或者語法樹，也就是DOM樹盖袭。如下圖：
css解析將css文件解析為樣式表對(duì)象失暂。如下圖：
js解析文件在加載的同時(shí)也進(jìn)行解析
瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘
-渲染
即為構(gòu)建渲染樹的過程，就是將DOM樹進(jìn)行可視化表示鳄虱。構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容弟塞。
五、繪制網(wǎng)頁(yè)
即為構(gòu)建渲染樹的過程拙已，就是將DOM樹進(jìn)行可視化表示决记。構(gòu)建這棵樹是為了以正確的順序繪制文檔內(nèi)容。瀏覽器根據(jù)html倍踪、css計(jì)算得到渲染樹系宫，結(jié)合相關(guān)js的執(zhí)行結(jié)果，最終將網(wǎng)頁(yè)繪制到屏幕上建车。
