一、大致步驟

第一步：輸入url：

• url是什么：
  url全稱為資源統(tǒng)一定位符，url對應(yīng)協(xié)議（常見的有http（明文傳輸），https（加密傳輸），file，ftp等），端口號，
• url和uri的區(qū)別：
  • url（資源統(tǒng)一定位符）
    uri（資源統(tǒng)一標(biāo)識符）
  • url是uri的一個(gè)特例，url包含定位web資源的足夠信息，其它的uri（如：mailto:xxx@.com）則不是定位符，因?yàn)楦鶕?jù)他的標(biāo)識符無法定位任何資源；
    url是絕對的，他是一個(gè)結(jié)構(gòu)化字符串。
  • urn（統(tǒng)一資源名稱）
    urn是uri的一個(gè)子類，urn命名資源，但不指定如何定位資源；

第二步：域名到ip

• 過程：域名（url）=>dns（domain name stystem）解析機(jī)=>IP地址

• dnf會(huì)在哪里查詢？

  1. 瀏覽器緩存：如果在之前對該url指定的主機(jī)進(jìn)行過訪問，瀏覽器會(huì)緩存該主機(jī)的ip一段時(shí)間（該時(shí)間瀏覽器指定），然后通過該IP地址找到對應(yīng)主機(jī)；
  2. 系統(tǒng)緩存：若瀏覽器中無該緩存，那么就到系統(tǒng)緩存中進(jìn)行查詢，瀏覽器會(huì)進(jìn)行系統(tǒng)調(diào)用，查詢緩存；
  3. 路由器緩存：如果系統(tǒng)緩存中也沒有，那么就到路由器緩存中進(jìn)行查詢；
  4. ISP DNS 緩存：如果路由器緩存依舊未命中，那么就到ISP DNS中查詢，一般的域名都能在這里查詢得到；
  5. 遞歸搜索：如果以上都沒有查詢到，那么就會(huì)到頂級域名服務(wù)器的根服務(wù)器中進(jìn)行遞歸查詢，只要該域名存在就肯定能找得到；

• 獲取瀏覽器屬性：window.navigator.userAgent

第三部：找到ip對應(yīng)的主機(jī)后，打包并發(fā)送http請求

• http報(bào)文信息范例
  get：http://asadasdasd.com/asdasd（請求方式和地址，同時(shí)還有：post，put，delete，head，trace，options）
  user-agent：用戶瀏覽器的類型版本信息
  accept：text/html,application/xhtml+xml,application/xml;q=0.9,image/webp*（瀏覽器接收的能識別的數(shù)據(jù)類型）
  accept-encoding：gzip，deflate（瀏覽器能識別的encoding）
  accept-language：瀏覽器能識別的語言
  cache-control：max-age=0
  connection：keep-alive
  cookie：XXXXXXXX（用戶的cookie）

• 什么是cookie

  1. cookie是一小段文本，當(dāng)用戶訪問站點(diǎn)時(shí)，可以對用戶的瀏覽器種下一個(gè)cookie用以保存用戶的相關(guān)信息，然后當(dāng)用戶下次進(jìn)行訪問時(shí)，站點(diǎn)會(huì)先讀取用戶的cookie，然后呈現(xiàn)相應(yīng)的頁面（例如：登陸一次后，下次再進(jìn)該網(wǎng)頁就自動(dòng)登錄）

• 幾種請求方式的用途和異同

  • get：索取數(shù)據(jù)（也可用于發(fā)送數(shù)據(jù)），向服務(wù)器拿一個(gè)資源，常見百度搜索，附帶發(fā)送的參數(shù)有512字節(jié)的限制，附帶的參數(shù)會(huì)在url地址中顯示，以鍵值對形式并且以？進(jìn)行分隔；
  • post：發(fā)送數(shù)據(jù)（也可用于獲取數(shù)據(jù)），向服務(wù)器發(fā)送一段數(shù)據(jù)，常見有留言板，理論上附帶發(fā)送的數(shù)據(jù)無大小限制，附帶的數(shù)據(jù)不再url上顯示；
  • put：用于向服務(wù)器傳輸一段數(shù)據(jù)，可以通過get/post達(dá)成；
  • delete：用于刪除服務(wù)器上的一段數(shù)據(jù)，可以通過get/post達(dá)成；
  • head：只查詢回應(yīng)的頭部，但是不拿response（響應(yīng)內(nèi)容）；
  • trace：查詢從本地網(wǎng)絡(luò)到訪問的站定之間經(jīng)歷了什么節(jié)點(diǎn)，查詢路由；
  • option：向服務(wù)器詢問支持什么傳輸方式；

第三步：創(chuàng)建TCP鏈接

• UDP和TCP的區(qū)別

  1. UDP不能夠保證傳輸?shù)目煽啃?，包不完整時(shí)，UDP不會(huì)重新發(fā)送請求（例如只接受到半張圖片）；
  2. TCP可以保證傳輸?shù)目煽啃?，包不完整時(shí)，TCP會(huì)重新發(fā)送請求；

• 為什么有時(shí)候頁面殘缺不全
  因?yàn)橛袝r(shí)候嵌入資源（例如：img標(biāo)簽的圖片）未下載下來導(dǎo)致dom布局錯(cuò)亂；

• 相關(guān)進(jìn)程處理（默認(rèn)端口不會(huì)再url上顯示，下面是一些默認(rèn)端口）
  通過端口號來處理不同的進(jìn)程
  http：80
  https：443
  ssh：22
  ftp：21

• 服務(wù)器
  物理主機(jī)
  webserver

  • nginx
  • 阿帕奇
  • 微軟

第四步：服務(wù)器響應(yīng)請求

• 那些內(nèi)容影響服務(wù)器生成的結(jié)果

  1. 請求方式（get/post拿到的可能不一樣）
  2. 路徑
  3. 請求參數(shù)（？XXX=XXX）
  4. cookie（用戶身份識別）
  5. 服務(wù)器配置
  6. 動(dòng)態(tài)語言代碼邏輯

• 服務(wù)器響應(yīng)的內(nèi)容

  1. 相應(yīng)的head
  2. response

第五步：瀏覽器拿到響應(yīng)文本，然后渲染

• 瀏覽器渲染頁面

  1. 瀏覽器渲染頁面的下載是自上而下的，渲染順序也是自上而下的，下載與渲染同時(shí)進(jìn)行；
  2. 解析HTML變成DOM樹；
  3. 解析CSS變成渲染樹；
  4. 遇到JS時(shí)解析JS，解析完成后立即執(zhí)行；
     （1，2同時(shí)進(jìn)行，一邊解析一邊生成頁面，會(huì)隨著頁面的內(nèi)容不斷調(diào)整）

• 關(guān)聯(lián)資源的處理

  1. 在渲染頁面到某一部分時(shí)，其上面的所有部分（當(dāng)前的HTML元素和CSS）都已下載完成；
  2. 但是相關(guān)聯(lián)的的元素不一定下載完成了（例如：圖片，視屏等元素會(huì)并行下載）；
  3. 同一個(gè)域名下并行下載數(shù)量有限制（有些網(wǎng)站圖片等其他資源會(huì)放在另外的服務(wù)器上）；

• JS和AJAX

  1. 下載解析JS時(shí)候是以阻塞的方式進(jìn)行下載，下載JS時(shí)，瀏覽器在發(fā)送了請求后直到響應(yīng)前都會(huì)阻塞其它資源的下載和渲染；
  2. 可以用HTML5的異步下載屬性（async和defer）
     • async：遇到JS后與其他資源一起下載，下載完成后執(zhí)行；
     • defer：遇到JS后與其他資源一起下載，等所有資源下載完成后再去執(zhí)行；
  3. JS的阻塞性下載是因?yàn)镴S有可能會(huì)改變DOM結(jié)構(gòu)，導(dǎo)致頁面重繪；
  4. 遇到AJAX后執(zhí)行，然后進(jìn)行下面的步驟，等待AJAX拿到數(shù)據(jù)后再執(zhí)行AJAX回調(diào)；

• CSS

  1. CSS下載完成后，將和原先下載的所有樣式表一起進(jìn)行解析，解析完成后，將對此前所有元素（包含已經(jīng)渲染過的元素）再渲染一遍；
  2. JS、CSS如果有重定義，首先查看優(yōu)先級，以優(yōu)先級高的為主，若無優(yōu)先級問題則瀏覽器以后定義的為主；

• 白屏和FOUC問題

  1. 白屏問題：
     • 原因：
       • 先加載CSS，加載完成后再對HTML進(jìn)行渲染，如果CSS加載時(shí)間過長，則導(dǎo)致白屏；
       • 使用@import，即使css放在link標(biāo)簽里，也有可能導(dǎo)致白屏；
       • 在IE瀏覽器下：css放置在頁面底部，在某些場景下(新窗口打開,刷新等)頁面會(huì)出現(xiàn)白屏,而不是內(nèi)容逐步展現(xiàn)；
       • JS放置在頭部阻塞后面內(nèi)容的下載；
  2. FOUC（無樣式內(nèi)容閃爍）
     • 原因：
       • 因?yàn)闉g覽器渲染機(jī)制問題，再CSS加載之前，先呈現(xiàn)了HTML，就會(huì)出現(xiàn)逐步展示無樣式內(nèi)容，然后樣式突然跳出來的問題；
  3. 總結(jié)：
     • 如果等待CSS下載完成后才進(jìn)行渲染，那么就有可能導(dǎo)致白屏；
     • 如果先展示頁面，等CSS下載完成后再渲染，就有可能導(dǎo)致FOUC問題；
  4. 解決：
     CSS放置在頭部（head）里，JS放置在/body之前；

• 常見狀態(tài)碼

  1. 200：OK（響應(yīng)成功）；
  2. 301：Moved Permanently（頁面已重定向）；
  3. 304：not modified（頁面未修改）；
  4. 403：Forbidden（無權(quán)限訪問）；
  5. 404：Not Found（服務(wù)器找到，但是沒找到頁面）；
  6. 500：Internal Server Error（服務(wù)器出錯(cuò)）；
  7. 502：bad getway（服務(wù)器未鏈接上）

• 304 Not Modified

  1. 304碼是頁面未改變的意思，說明當(dāng)前頁面已訪問過，且緩存在有效期內(nèi)，則服務(wù)器回應(yīng)last-modified給瀏覽器，瀏覽器進(jìn)行判斷后若緩存未改變，頁面將直接從本地緩存中提??；
     • cache-control：max-age=30000（該頁面緩存的有效時(shí)間秒數(shù)）
     • expires：mon 02 nov 2015 03：02：54 GMT （該頁面緩存過期時(shí)間）
  2. 若頁面緩存被清理，那么就重新發(fā)送請求拿；
  3. 若緩存超過了有效期，則驗(yàn)證last-modified（最后修改時(shí)間）或者etag
     • last-modified：頁面最后修改的時(shí)間；
     • etag：文本內(nèi)容加密出來的一串字符串，若與之前相比未變則發(fā)送304；

二、以服務(wù)器為阿帕奇，php語言，動(dòng)態(tài)網(wǎng)站訪問過程圖

三種情況

第一種：用戶訪問服務(wù)端的index.html文件

1. 輸入url，通過本機(jī)dns解析為ip地址，通過ip地址找到阿帕奇服務(wù)器；
2. 通過http協(xié)議創(chuàng)建tcp鏈接，并連接到服務(wù)器上，默認(rèn)端口號是80，請求服務(wù)器下載對應(yīng)的資源；
3. 服務(wù)器收到請求后，找到對應(yīng)頁面后打開，然后將內(nèi)容返回給用戶的瀏覽器；
4. 瀏覽器渲染頁面并呈現(xiàn)給用戶；

第二種：用戶訪問服務(wù)端的index.php文件

1. 與上面相同，經(jīng)過dns解析后的ip找到服務(wù)器，服務(wù)器找到相應(yīng)的php文件；
2. 阿帕奇本身無法處理php文件，于是委托php應(yīng)用服務(wù)器（需要安裝php應(yīng)用服務(wù)器）進(jìn)行處理。并且轉(zhuǎn)化為html靜態(tài)代碼，再返回給阿帕奇；
3. 阿帕奇將html靜態(tài)代碼傳輸給瀏覽器，瀏覽器渲染并呈現(xiàn)；

第三種：用戶訪問服務(wù)器里面的mysql數(shù)據(jù)庫里面的數(shù)據(jù)

1. 與上面相同，經(jīng)過dns解析后的ip找到服務(wù)器，服務(wù)器找到相應(yīng)的php文件；
2. 服務(wù)器委托php應(yīng)用服務(wù)器解析php文件；
   ★3. php服務(wù)器打開php文件，在php文件中通過與數(shù)據(jù)庫連接的代碼鏈接到數(shù)據(jù)庫，然后通過sql語句操作數(shù)據(jù)庫中的數(shù)據(jù)。找到數(shù)據(jù)后在通過php服務(wù)器轉(zhuǎn)化為html靜態(tài)碼，再返回給阿帕奇；
3. 阿帕奇返回給瀏覽器，瀏覽器渲染并呈現(xiàn)；