客戶端和服務器端交互及性能優化

客戶端和服務器端的交互處理

當用戶在地址欄中輸入網址，到最後看到頁面，中間都經歷了什麼 ?

1.URL地址解析

A: URI / URL / URN

URI（Uniform Resource Identifier / 統一資源標誌符） URL（Uniform Resource Locator / 統一資源定位符） URN（Uniform Resource Name / 統一資源名稱）

B：一個完整URL的組成部分和實際意義

• 協議：http 、 https 、 ftp
• 域名：頂級域名、一級域名、二級域名、經常使用域名的性質
• 端口號：80 、443 、 21 、 端口號範圍
• 請求資源路徑名稱：僞URL
• 問號參數
• HASH值

C：特殊字符加密和解密

• encodeURI / decodeURI
• encodeURIComponent / decodeURIComponent
• escape / unescape
• ......

2.DNS域名解析

A:DNS域名解析是什麼？

• 發佈站點時配置域名解析
• 網址訪問進行DNS域名反解析

B：DNS Prefetch 即 DNS 預獲取

• 減小DNS的請求次數
• 進行DNS預獲取

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//static.360buyimg.com">
<link rel="dns-prefetch" href="//misc.360buyimg.com">
<link rel="dns-prefetch" href="//img10.360buyimg.com">
<link rel="dns-prefetch" href="//img11.360buyimg.com">
<link rel="dns-prefetch" href="//img12.360buyimg.com">
......
複製代碼

• 緩存時間在1分鐘左右

3.創建TCP鏈接（三次握手）

• 第一次握手：由瀏覽器發起，告訴服務器我要發送請求了
• 第二次握手：由服務器發起，告訴瀏覽器我準備接受了，你趕忙發送吧
• 第三次握手：由瀏覽器發送，告訴服務器，我立刻就發了，準備接受吧

4.發送HTTP請求

A:HTTP請求報文

• 起始行
• 請求頭（首部）
• 請求主體

B：強緩存 和 協商緩存

這部份內容延後講

• 強緩存 ( Cache-Control 和 Expires )
• 協商緩存 ( Last-Modified 和 Etag )

5.服務器獲得並處理請求

A：WEB（圖片）服務器和數據服務器

• Tomcat

• Nginx

• Apache

• IIS

• ......

B:HTTP響應報文

• 響應狀態碼
  • 200 / 201 / 204
  • 301 / 302 / 304 / 307
  • 400 / 401 / 404
  • 500 / 503
• 響應頭（首部）
• 響應主體

6.客戶端渲染頁面

A:瀏覽器渲染頁面的步驟

• 解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
• 將DOM樹和CSSOM樹結合，生成渲染樹(Render Tree)
• Layout(迴流): 根據生成的渲染樹，計算它們在設備視口(viewport)內的確切位置和大小，這個階段是迴流
• Painting(重繪): 根據渲染樹以及迴流獲得的幾何信息，獲得節點的絕對像素
• Display:將像素髮送給GPU，展現在頁面上

B：DOM的重繪和迴流

• 重繪：元素樣式的改變（但寬高、大小、位置等不變）
• 迴流：元素的大小或者位置發生了變化（當頁面佈局和幾何信息發生變化的時候），觸發了從新佈局，致使渲染樹從新計算佈局和渲染
• 注意：迴流必定會觸發重繪，而重繪不必定會迴流

C：前端性能優化之：避免DOM的迴流

• 放棄傳統操做dom的時代，基於vue/react開始數據影響視圖模式
• 分離讀寫操做 （現代的瀏覽器都有渲染隊列的機制）
• 樣式集中改變
• 緩存佈局信息
• 元素批量修改
• 動畫效果應用到position屬性爲absolute或fixed的元素上（脫離文檔流）
• CSS3硬件加速（GPU加速）
• 犧牲平滑度換取速度
• 避免table佈局和使用css的javascript表達式

7.斷開鏈接（四次揮手）

• 第一次揮手：由瀏覽器發起，發送給服務器，我請求報文發送完了，你準備關閉吧；
• 第二次揮手：由服務器發起，告訴瀏覽器，我接收完請求報文，我準備關閉，你也準備吧；
• 第三次揮手：由服務器發起，告訴瀏覽器，我響應報文發送完畢，你準備關閉吧；
• 第四次揮手：由瀏覽器發起，告訴服務器，我響應報文接收完畢，我準備關閉，你也準備吧；

A：Connection: Keep-Alive 保持TCP不中斷

前端性能優化彙總

1.減小HTTP請求次數和請求的大小

• 文件合併壓縮
• 雪碧圖 css sprite
• 圖片base64
• 儘可能使用字體圖標
• 圖片懶加載
• 音視頻取消預加載
• 在客戶端和服務器端進行信息交互的時候，對於多項數據咱們儘量基於JSON格式來進行傳送（JSON格式的數據處理方便，資源偏小）
• 開啓服務器端的gzip壓縮
• ......

2.創建緩存機制

• DNS緩存
• 數據緩存（例如：本地存儲）
• 強緩存 和 協商緩存（304）
• 離線存儲
• 作CDN加速
• ......

3.代碼上的優化

• 減小DOM的重繪和迴流
• 在JS中儘可能減小閉包的使用
• 在JS中避免「嵌套循環」和「死循環」
• 儘量使用事件委託
• 儘可能減小CSS表達式的使用(expression)
• CSS選擇器解析規則是從右向左解析
• 頁面中的數據獲取採用異步編程和延遲分批加載
• 儘量實現JS的封裝（低耦合高內聚），減小頁面中的冗餘代碼
• 儘可能減小對於filter濾鏡屬性的使用
• 在CSS導入的時候儘可能減小使用@import導入式
• 使用window.requestAnimationFrame（JS中的幀動畫）代替傳統的定時器動畫
• 減小遞歸的使用，避免死遞歸，避免因爲遞歸致使的棧內存嵌套
• 基於SCRIPT調取JS的時候，可已使用 defer或者async 來異步加載
• 避免使用with語句
• ......