前端性能優化基礎知識

瀏覽器工做的詳細流程圖

緩存相關

1. Prompt for unload 卸載已經存在的頁面 釋放佔用的內存 提醒unload
2. redirect 本地的重定向，先從本地找，本地找不到再請求服務器 真正的開始unload
3. App cache 操做瀏覽器的緩存

網絡相關

4. DNS 查詢服務器IP地址 CDN 優化

5. TCP 與服務器連接TCP 長鏈接優化，複用TCP

6. Request 優化服務器

7. Response 壓縮 gzip

處理數據

8. Processing 解析文檔 生成dom樹，綁定事件
9. onLoad 加載

DNS詳解

• 域名系統 將域名（文本）轉化爲IP
• 頂級域名 後綴 .com/.com.cn 加了前綴 www.就變成了二級域名 www是萬維網
• 域名服務器
  

  

  • Root 解析 .com
  • TLD 解析 google.com
  • Name 解析 www.google.com
• 域名資源記錄

TCP三次握手與四次揮手

• TCP協議模型詳解

  

  

• 三次握手

  1. 客戶端發起 調用connect() 發送指令 SYN seq順序號 TCP連接時候是把大數據包拆分紅小數據包傳輸的，因此就有了標識的順序號，以便進行組裝
  2. 遠程服務器禎聽 listen() ACK應答順序號 服務器也有本身的請求號
  3. 客戶端應答服務器的順序號加1返回服務器

• 屢次數據傳輸

• 四次分手

  1. 客戶端 調用close() 發送指令 FIN 順序號 應答號
  2. 服務器 響應客戶端請求
  3. 服務器應答以後 調用close() 發送 FIN
  4. 客戶端進行確認已斷開 服務器多一次是爲了先響應，避免客戶端超時

CDN

• 選擇離得最近的服務器

緩存機制

× Etag/If-None-Match策略

• Etag: web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識
• If-None_Match:當資源過時時（使用Cache-Control標識的max-age），發現資源是Etage聲明，則再次向web服務器請求時帶上頭If-None-Match（Etag的值）。web服務器收到請求後發現有頭If-None-Match則與被請求資源的相應校驗串進行比對，決定返回200或者304 × last-Modified/If-Modified-Since策略
• Last-Modified:標示這個響應資源的最後修改時間。web服務器在響應請求時,告訴瀏覽器資源的最後修改時間。
• If-Modified-Since:當資源過時時(使用Cache-Control標識的max-age),發現資源具備Last-Modified聲明,則再次向web服務器請求時帶上頭 If-Modified-Since,表示請求時間。web服務器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應消息包體內),HTTP200;若最後修改時間較舊,說明資源無新修改,則響應HTTP 304 (無需包體,節省瀏覽),告知瀏覽器繼續使用所保存的cache。