《從 URL 到頁面展現(xiàn)發(fā)生了什么》這是一個老生常談的博客題目
老生常談，在編程界里可以理解為【很重要】
以為個人的理解猎唁，前端工程師，說到底就是在研究并實現(xiàn)《從 URL 到頁面展現(xiàn)發(fā)生了什么》
我實在能力有限，對于這個題目一直不敢寫乞娄，因為這涉及的知識點太廣了
然而再難也得邁出這一步剃斧，因為你不寫出來轨香，你永遠(yuǎn)不知道自己的水平到底是多有限
今天是入職的前一天晚上，希望在工作的半年或一年以后幼东，我能對這個題目有更加深刻的認(rèn)識
舉個例子簡短回答
為了更好的理解,我們走一遍流程
- 訪問百度主頁
- 這個時候 Client 就是瀏覽器臂容，它發(fā)了一個請求
- 這個請求是發(fā)給百度服務(wù)器的科雳，也就是上圖的 Server,但是這個說法不太準(zhǔn)確，Server 不一定是一個機器,也可能是一個軟件(應(yīng)用程序)
- 接著這個 Server 會返回 Client 一個網(wǎng)頁
- 我們就看到了百度
其實以上的例子總結(jié)下來就是以下四步么
- 用戶請求遠(yuǎn)程資源
- 瀏覽器查找遠(yuǎn)程資源脓杉，打包用戶請求并發(fā)送
- 服務(wù)器根據(jù)用戶請求的資源路徑及附帶參數(shù)糟秘，配合自身邏輯生成相關(guān)內(nèi)容，發(fā)送給瀏覽器
- 瀏覽器解析結(jié)果球散，翻譯為直觀方式呈現(xiàn)
好了尿赚，回答完畢
標(biāo)準(zhǔn)答案
那么以上步驟具體可以細(xì)化為
- 輸入地址
- 瀏覽器查找域名的 IP 地址
- 瀏覽器向 web 服務(wù)器發(fā)送一個 HTTP 請求
- 服務(wù)器的永久重定向響應(yīng)
- 瀏覽器跟蹤重定向地址
- 服務(wù)器處理請求
- 服務(wù)器返回一個 HTTP 響應(yīng)
- 瀏覽器顯示 HTML
- 瀏覽器發(fā)送請求獲取嵌入在 HTML 中的資源（如圖片、音頻蕉堰、視頻凌净、CSS、JS等等）
好了屋讶，你對這一系列過程有一個大體的概念了泻蚊，接下來細(xì)說每一個步驟
輸入地址
當(dāng)我們開始在瀏覽器中輸入網(wǎng)址的時候，瀏覽器其實就已經(jīng)在智能的匹配可能得 url 了丑婿，他會從歷史記錄性雄，書簽等地方，找到已經(jīng)輸入的字符串可能對應(yīng)的 url羹奉，然后給出智能提示秒旋，讓你可以補全url地址。對于 google 的 chrome 的瀏覽器诀拭，他甚至?xí)苯訌木彺嬷邪丫W(wǎng)頁展示出來迁筛，就是說，你還沒有按下 enter耕挨，頁面就出來了细卧。
厲害了
瀏覽器查找域名的 IP 地址
URL 到服務(wù)器逐級
- 一個頁面訪問的本質(zhì)是我們希望通過一個路徑找到相應(yīng)的資源
- 路徑就是我們的 URL，資源是服務(wù)器給我們的請求的響應(yīng)
- 首先我們需要找到網(wǎng)絡(luò)上的服務(wù)器才能找到機器上的資源筒占，網(wǎng)絡(luò)主機的定位靠的是 IP 地址
域名到IP
IP(Internet Protocol)
: 互聯(lián)網(wǎng)中設(shè)備間進行通信都要遵從的一種協(xié)議贪庙，它規(guī)定了每臺設(shè)備都要有且唯一的 IP 地址，用來標(biāo)識自己在互聯(lián)網(wǎng)中的地址翰苫。格式通常為 http://XXX.XXX.XXX.XXX止邮，不同網(wǎng)段下 IP 地址的范圍也不同。如有興趣者奏窑，請自行百度导披。
域名(Domain Name)
: 由于IP協(xié)議規(guī)定的純數(shù)字 IP 地址在日常中難以記憶,因此人們便產(chǎn)生使用更加常見，好記的字符標(biāo)識設(shè)備的地址埃唯，域名應(yīng)運而生撩匕。一個域名就是一個更加容易記憶的目標(biāo)主機的地址標(biāo)識符。例如:百度的域名就為百度一下墨叛，你就知道止毕，實際對應(yīng)的IP地址為 119.75.217.109
DNS(Domain Name System)
: 互聯(lián)網(wǎng)中實際定位設(shè)備時還是使用 IP 地址來定位模蜡，因此產(chǎn)生了 DNS，一種專門用來將域名轉(zhuǎn)換為 IP 地址的協(xié)議滓技，提供該協(xié)議服務(wù)的服務(wù)器就叫 DNS 服務(wù)器哩牍。
總結(jié)一下
- 為什么用域名不用IP
- 因為 IP 有點反人類的記憶思維
- 域名和 IP 對應(yīng) DNS (Domain Name System)
實際上DNS就是一組鍵值對,鍵名就是域名,值就是IP地址
DNS解析
輸入了一個域名，你得靠 DNS 解析出一個相應(yīng)的 IP 地址吧
- 瀏覽器緩存：如果之前訪問過該主機令漂，(不是URL指定的資源)膝昆，瀏覽器會緩存DNS一段時間，這樣就可以直接使用瀏覽器緩存的DNS叠必，至于一段時間是多久沒要求荚孵，瀏覽器自行決定
- 系統(tǒng)緩存：如果瀏覽器緩存里沒有記錄，瀏覽器會做系統(tǒng)調(diào)用纬朝，獲取系統(tǒng)中的緩存記錄
- 路由器緩存：如果系統(tǒng)緩存同樣沒有命中收叶，那就需要查詢路由器緩存了
- ISP（互聯(lián)網(wǎng)服務(wù)提供商,例如電信,移動）的 DNS 緩存：路由器緩存未命中會查詢 ISP(Internet Service Provider)，一般域名在這里都可以找到了
- 遞歸搜索：我們使用的 ISP 的 DNS 記錄里面如果還沒有的話共苛，那么就會從頂級域名服務(wù)器的根域名服務(wù)器開始遞歸查詢判没，這個肯定會查到了
第三者
實際上瀏覽器充當(dāng)了我們要找到的 IP 地址的第三者,類似中介
可以用以下代碼來看瀏覽器的版本
window.navigator.userAgent
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36"
瀏覽器向 web 服務(wù)器發(fā)送一個 HTTP 請求
打包 HTTP 請求
圖中的請求是什么，僅僅是輸入的 URL 么
當(dāng)然不是隅茎，請求是一段報文澄峰，包括但不僅僅是 URL
那么請求（request）包含什么呢
- 請求行
- 請求頭
- 空行
- 消息體
請求又分為兩類
- GET 請求
- POST 請求
GET 請求
GET / HTTP/1.1 // 請求行,下面一直到空行之上都是請求頭
Host: www.baidu.com
Accept: text/html
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4
Cookie: BAIDUID=5A056AFFCD3D7072D17933F3750CAB0B:FG=1;
// 空行
// 如果是 GET,那么一般消息體是空的
POST 請求
POST /login/email HTTP/1.1 // 請求行,下面一直到空行之上都是請求頭
Host: www.zhihu.com
Accept: */*
Content-Type: application/x-www-form-urlencoded; charset=UTF-8 // 描述消息體
Content-Length: 119
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/601.3.9 (KHTML, like Gecko) Version/9.0.2 Safari/601.3.9
Cookie: _xsrf=e0f0996099f0c4e3e0157d92d65dfe23;
// 空行
password=zhihu&captcha=mrah&remember_me=true&email=huayiqishi%40qq.com // 消息體
創(chuàng)建 TCP 連接
- 一般瀏覽器都是通過使用的 TCP 協(xié)議，UDP 不可靠辟犀，所以瀏覽器得到的 response 要么是全的俏竞，要么得不到
- 瀏覽器打包請求自然也是打包的 HTTP 報文
- 那么為什么有時候我們看到的頁面是殘缺不全的呢（因為是資源下載失敗了而不是 response 這個文本有殘缺）
瀏覽器發(fā)送請求的方法
- get
- head
- post
- trace
- options
- put(往服務(wù)器上面放置一些東西)
- delete(往服務(wù)器上刪除一些東西)
一般的瀏覽器只能發(fā)起 GET 或者 POST 請求
服務(wù)器的永久重定向響應(yīng)
服務(wù)器給瀏覽器響應(yīng)一個301永久重定向響應(yīng)，這樣瀏覽器就會訪問 http://www.google.com/ 而非 http://google.com/堂竟。
為什么服務(wù)器一定要重定向而不是直接發(fā)送用戶想看的網(wǎng)頁內(nèi)容呢魂毁？其中一個原因跟搜索引擎排名有關(guān)。如果一個頁面有兩個地址出嘹，就像 http://www.yy.com/ 和 http://yy.com/席楚，搜索引擎會認(rèn)為它們是兩個網(wǎng)站，結(jié)果造成每個搜索鏈接都減少從而降低排名疚漆。而搜索引擎知道301永久重定向是什么意思酣胀，這樣就會把訪問帶 www 的和不帶 www 的地址歸到同一個網(wǎng)站排名下。還有就是用不同的地址會造成緩存友好性變差娶聘，當(dāng)一個頁面有好幾個名字時，它可能會在緩存里出現(xiàn)好幾次甚脉。
301和302的區(qū)別
301和302狀態(tài)碼都表示重定向丸升，就是說瀏覽器在拿到服務(wù)器返回的這個狀態(tài)碼后會自動跳轉(zhuǎn)到一個新的 URL 地址，這個地址可以從響應(yīng)的 Location 首部中獲任薄（用戶看到的效果就是他輸入的地址 A 瞬間變成了另一個地址 B）——這是它們的共同點狡耻。
他們的不同在于
- 301表示舊地址 A 的資源已經(jīng)被永久地移除了（這個資源不可訪問了）墩剖，搜索引擎在抓取新內(nèi)容的同時也將舊的網(wǎng)址交換為重定向之后的網(wǎng)址；
- 302表示舊地址 A 的資源還在（仍然可以訪問）夷狰，這個重定向只是臨時地從舊地址 A 跳轉(zhuǎn)到地址 B岭皂，搜索引擎會抓取新的內(nèi)容而保存舊的網(wǎng)址。 SEO 302好于301
重定向原因
- 網(wǎng)站調(diào)整（如改變網(wǎng)頁目錄結(jié)構(gòu)）
- 網(wǎng)頁被移到一個新地址
- 網(wǎng)頁擴展名改變(如應(yīng)用需要把.php改成.Html或.shtml)
這種情況下沼头，如果不做重定向爷绘，則用戶收藏夾或搜索引擎數(shù)據(jù)庫中舊地址只能讓訪問客戶得到一個404頁面錯誤信息，訪問流量白白喪失进倍；再者某些注冊了多個域名的網(wǎng)站土至，也需要通過重定向讓訪問這些域名的用戶自動跳轉(zhuǎn)到主站點等。
什么時候進行301或者302跳轉(zhuǎn)
當(dāng)一個網(wǎng)站或者網(wǎng)頁24—48小時內(nèi)臨時移動到一個新的位置猾昆，這時候就要進行302跳轉(zhuǎn)陶因，而使用301跳轉(zhuǎn)的場景就是之前的網(wǎng)站因為某種原因需要移除掉，然后要到新的地址訪問垂蜗，是永久性的楷扬。
清晰明確而言，使用301跳轉(zhuǎn)的大概場景如下：
- 域名到期不想續(xù)費（或者發(fā)現(xiàn)了更適合網(wǎng)站的域名）贴见，想換個域名烘苹。
- 在搜索引擎的搜索結(jié)果中出現(xiàn)了不帶www的域名，而帶www的域名卻沒有收錄蝇刀，這個時候可以用301重定向來告訴搜索引擎我們目標(biāo)的域名是哪一個螟加。
- 空間服務(wù)器不穩(wěn)定，換空間的時候吞琐。
瀏覽器跟蹤重定向地址
現(xiàn)在瀏覽器知道了 "http://www.google.com/"才是要訪問的正確地址捆探，所以它會發(fā)送另一個http請求。這里沒有啥好說的
服務(wù)器處理請求
相關(guān)進程處理請求
主機運行多個程序,那個來處理HTTP請求呢
- http: 80
- https: 443
- ftp: 21
- ssh: 22
服務(wù)器
- 物理主機
- web server
服務(wù)器返回一個 HTTP 響應(yīng)
服務(wù)器響應(yīng)請求
哪些內(nèi)容影響服務(wù)器結(jié)果呢
- 請求方法
- 路徑
- query string
- cookkie
- 服務(wù)器配置
- 動態(tài)語言代碼邏輯
服務(wù)器響應(yīng)內(nèi)容
- 狀態(tài)行
- 響應(yīng)頭
- 響應(yīng)正文
1. 狀態(tài)行
- 協(xié)議版本：是用http1.0還是其他版本
- 狀態(tài)描述：狀態(tài)描述給出了關(guān)于狀態(tài)代碼的簡短的文字描述站粟。比如狀態(tài)代碼為200時的描述為 ok
- 狀態(tài)代碼：狀態(tài)代碼由三位數(shù)字組成黍图，第一個數(shù)字定義了響應(yīng)的類別，且有五種可能取值
例如：HTTP/1.1 200 OK
2. 響應(yīng)頭
響應(yīng)頭部：由關(guān)鍵字/值對組成奴烙，每行一對助被，關(guān)鍵字和值用英文冒號":"分隔，典型的響應(yīng)頭有：
3. 響應(yīng)正文
包含著我們需要的一些具體信息切诀，比如cookie揩环，html,image，后端返回的請求數(shù)據(jù)等等幅虑。這里需要注意丰滑，響應(yīng)正文和響應(yīng)頭之間有一行空格，表示響應(yīng)頭的信息到空格為止倒庵，下圖是fiddler抓到的請求正文褒墨，紅色框中的響應(yīng)正文：
瀏覽器顯示 HTML
渲染頁面
- 瀏覽器下載的順序是從上到下炫刷，渲染的順序也是從上到下，下載和渲染同時進行
- 解析 HTML 生成 DOM 樹
- 解析 HTML 中的 CSS郁妈，生成渲染樹
- 解析 JavaScript浑玛，解析到的時候執(zhí)行
瀏覽器是如何把頁面呈現(xiàn)在屏幕上的呢？不同瀏覽器可能解析的過程不太一樣噩咪，這里我們只介紹webkit的渲染過程顾彰，下圖對應(yīng)的就是WebKit渲染的過程，這個過程包括：
解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
瀏覽器在解析html文件時剧腻，會”自上而下“加載拘央，并在加載過程中進行解析渲染。在解析過程中书在，如果遇到請求外部資源時灰伟，如圖片、外鏈的 CSS儒旬、iconfont 等栏账，請求過程是異步的，并不會影響 html 文檔進行加載栈源。
解析過程中挡爵，瀏覽器首先會解析 HTML 文件構(gòu)建 DOM 樹，然后解析 CSS 文件構(gòu)建渲染樹甚垦，等到渲染樹構(gòu)建完成后茶鹃，瀏覽器開始布局渲染樹并將其繪制到屏幕上。這個過程比較復(fù)雜艰亮，涉及到兩個概念: reflow(回流)和 repain(重繪)闭翩。
DOM 節(jié)點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等迄埃，這個過程稱為 relow疗韵，當(dāng)盒模型的位置，大小以及其他屬性侄非，如顏色蕉汪、字體等確定下來之后，瀏覽器便開始繪制內(nèi)容逞怨，這個過程稱為 repain者疤。
頁面在首次加載時必然會經(jīng)歷 reflow 和 repain。reflow 和 repain 過程是非常消耗性能的叠赦，尤其是在移動設(shè)備上宛渐，它會破壞用戶體驗，有時會造成頁面卡頓眯搭。所以我們應(yīng)該盡可能少的減少 reflow 和 repain窥翩。
關(guān)聯(lián)資源處理
- 在展現(xiàn)到頁面的某一部分時，即上面的所有部分都已經(jīng)下載完成
- 并不是說所有相關(guān)聯(lián)的元素都已經(jīng)下載完鳞仙，圖片寇蚊，視頻等元素需要另外并行下載
- 同一個域名下并行下載數(shù)量有限制
JS 和 AJAX
- JS 不能并行的下載和解析，采用阻塞的方式棍好，當(dāng)頁面引用了 JS 的時候瀏覽器發(fā)送請求后會一直阻塞直到得到響應(yīng)
- 因為瀏覽器需要1個穩(wěn)定的 DOM 樹結(jié)構(gòu)仗岸，而 JS 中很有可能有代碼直接改變了 DOM 樹結(jié)構(gòu)，瀏覽器為了防止出現(xiàn) JS 修改 DOM 樹借笙，需要重新構(gòu)建 DOM 樹的情況扒怖，所以就會阻塞其他的下載和呈現(xiàn)
- 遇到 AJAX 后執(zhí)行，然后進行下面的步驟业稼，AJAX 拿到結(jié)果后再執(zhí)行 AJAX 回調(diào)函數(shù)
CSS
- 樣式表在下載完成后盗痒，將和以前下載的所有樣式表一起進行解析，解析完成后低散，將對此前所有元素（含以前已經(jīng)渲染的）重新進行渲染
- JS俯邓，CSS 中如果有重定義，后定義將覆蓋之前的定義熔号，而不會報錯
直接使用本地緩存
- 服務(wù)器發(fā)給瀏覽器的文件中會帶有 Expires 或 Cache-Control 說明文件什么時候失效
- 在有效期內(nèi)的話瀏覽器直接使用本地文件,不發(fā)請求
服務(wù)器驗證
- 服務(wù)器響應(yīng)中會帶有文件的最后修改時間或 Etag
- 瀏覽器發(fā)送重復(fù)請求會帶上這些信息稽鞭，如果服務(wù)器判斷沒有變化，發(fā)送304狀態(tài)碼引镊，讓瀏覽器使用本地緩存
好了朦蕴，從 URL 到頁面展現(xiàn)大概就是這個樣子的
當(dāng)然了，作為勵志做一名號前端的我們弟头，知道這些是遠(yuǎn)遠(yuǎn)不夠的吩抓，請把以上的每一個點都細(xì)化成博客，我相信功力會大增的
學(xué)點單詞
- preserve
英 [pr??z?:v] 美 [pr??z?rv]
vt. 保護; 保持亮瓷，保存; 腌制食物; 防腐處理;
vi. 保鮮; 保持原狀; 做蜜餞; 禁獵;
n. 蜜餞; 防護用品; 禁獵地; 獨占的事物（或范圍）; - cache
英 [k??] 美 [k??]
n. 藏物處; 隱藏處; 藏匿的珍寶; <電腦>快速緩沖貯存區(qū);
vt. 貯藏;
vi. 躲藏;
參考文章
(完)
文檔信息
- 自由轉(zhuǎn)載-非商用-非衍生-保持署名
- 發(fā)表日期：2017年6月4日
