優化vue+springboot項目頁面響應時間：waiting(TTFB) 及content Download

TTFB全稱Time To First Byte，是指網絡請求被發起到從服務器接收到地一個字節的這段時間。包含了TCP連接時間、發送HTTP請求時間和獲得相應消息第一個字節的時間。

環境： 開發 vue Cascader 級聯選擇器，listview接口一次性請求樹結構數據接近5w條（3.9MB)，nginx 反向代理 部署vue 、部署springboot，同機部署 mysql。

問題：生產環境，請求listview接口就waiting(TTFB) 4秒，content Download 16 秒，總計需要20秒，時間太長了。

開發環境，本機部署nginx,連接遠程服務器端mysql. 請求listview接口就waiting(TTFB) 4秒，content Download 1 秒，總計需要5秒。

優化方法有如下：

1）服務端數據庫鏈接地址串 及 vue 服務器鏈接地址，改外網ip 、域名 、localhost 、proxy_pass為 127.0.0.1 ，直接影響waiting(TTFB)。原因：127.0.0.1無需解析，localhost還要本地DNS解析。

MYSQL的安全策略的問題，對於每一個連接以及每一個操作，MYSQL都會check當前用戶的主機名，so,當我們對數據庫進行op的時候，MYSQL數據庫服務器都會check一次主機名，這就導致了我們遠端操作數據庫的客戶端出現幾秒鍾的等待狀態。

2）前端需要tree 數據結構，如果直接返回List, 前端處理慢，直接改用后端處理。后端處理方式：使用Map<id, object>存放id 和對象本身。查詢父節點id時，直接map.get( parentID)獲取父節點對象，追加到父節點的childList中。注意不要使用遞歸，非常慢。也不要使用雙層循環。

3）返回給前端樹結構數據字段只有必要字段：id,name,parent_id,children, 刪除多余字段

4）nginx 及vue 開啟 gzip 

5）查詢語句優化，使用explain分析，創建索引，強制使用索引，使用關聯查詢【join】代替子查詢,使用varchar/nvarchar 代替char/nchar ，因為首先變長字段存儲空間小，可以節省存儲空間，其次對於查詢來說，在一個相對較小的字段內搜索效率顯然要高些。

6） vue端ajax中的setRequestHeader設置請求頭， Connection:keep-alive

7）nginx 配置http2

8) 服務器dns解析 vi /etc/hosts  添加 ip 域名  

 

經過以上優化后，listview接口請求耗時減少到10秒內。

再怎么優化呢？查了網上不少資料，最后再想了一下， springboot 項目接口返回數據是否可以壓縮。度娘說可以。

application.yml

server:
  compression:
    enabled: true
    min-response-size: 1024
    mime-types: application/javascript,application/json,application/xml,text/html,text/xml,text/plain,text/css,image/*

再次對比結果：  傳輸數據大小456kb,響應時間1.33秒 ，到此總算告一段落

 

 

但請教大拿說，waiting(TTFB)還可以再優化一下 控制在500ms內才算正常。

待后期再想想辦法。