當用戶在瀏覽器地址欄輸入一個網址到看到整個頁面

• 1.url解析 （客戶端做）-> 2.DNS解析（域名解析）->3.建立TCP鏈接（TCP三次握手）->4.發送http請求，服務器處理請求，返回響應結果->5.關閉TCP的鏈接通道(TCP四次揮手)->6.瀏覽器渲染->7.代碼運行中

性能優化匯總

• 1.利用緩存

  • 對于靜態資源文件實現強緩存和協商緩存（xxx.html這種頁面不進行強緩存，xxx.css/js/png...可以強緩存，每次更新在后面加哈希值或時間戳，這樣HTML在加載的時候就會重新拉取資源了）
  • 對于不經常更新的接口數據采用本地存儲做數據緩存

• 2.DNS優化

  • 分服務器部署，增加HTTP并發性（這導致DNS解析變慢）

  • DNS Prefetch

    
    
    DNS預解析.png
• 3. TCP的三次握手和四次揮手
  • Connection:keep-alive
• 4. 數據傳輸
  • 減少數據傳輸的大小 ->內容或者數據壓縮（webpack等），服務器端開啟GZIP壓縮（一般能壓縮60%左右）, 大批量數據分批次請求（例如：下拉刷新或者分頁，保證首次加載請求數據少）
  • 減少HTTP請求的次數 ->資源文件合并處理，字體圖標，雪碧圖 CSS-Sprit，圖片的BASE64

• 5.CDN服務器“地域分布式”

前端優化-減少白屏效果

• LOADDING 人性化體驗(轉圈圈)
• 骨架屏：客戶端骨屏 + 服務器骨架屏
• 圖片延遲加載

前端骨架屏和客戶端骨架屏

• 前端骨架屏：開始只用默認的占位塊占位（保證結構的美觀）=>開始只加載第一屏數據（圖片都是延遲加載），滾動到哪一屏幕，再去加載這一屏的數據和圖片
• 客戶端骨架屏：首屏內容都是服務器直接渲染好的（在服務器能抗住的情況下，比客戶端一步步的渲染會更快一點）

CDN資源(地域分布式)：在北京發了一條微信，是發送到北京的服務器上，北京服務器再發送到總服務器，總服務器再下發到接受微信人的那個地域服務器。