問題描述

哪位大神幫忙看一下，頁面加載很慢是什么原因，希望能具體分析一下，有什么好的解決辦法線上地址http://cqwind.chinacloudapp.c...

問題解答

看了圖，耗時(shí)最長(zhǎng)的幾個(gè)都是Ajax/XHR請(qǐng)求。

由于靜態(tài)資源加載很快，所以不可能是網(wǎng)速的原因。所以你可以：

在前端盡量合并HTTP請(qǐng)求。

讓后臺(tái)優(yōu)化一下，提高相應(yīng)速度。（你的情況看，最關(guān)鍵的地方應(yīng)該在這里；如果后臺(tái)甩鍋，那你換個(gè)地方模擬HTTP請(qǐng)求，如使用Postman之類的工具，用事實(shí)說話。）

1.壓縮js，css，看了都沒壓縮

2.壓縮圖片

3.可以把css這些打包，或者建議第一次加載得時(shí)候，做一個(gè)loading層

這些資源文件最好都?jí)嚎s打包了一下，用gulp最簡(jiǎn)單就能實(shí)現(xiàn)，還有如果提供更好的用戶體驗(yàn)，可以學(xué)學(xué)google earth，第一次訪問加載所有資源，bundle，提供一個(gè)loading層。后面的動(dòng)態(tài)數(shù)據(jù)要么輪訓(xùn)，要么直接做websocket

還有就是我仔細(xì)看了，你得數(shù)據(jù)是調(diào)用的耗時(shí)比較嚴(yán)重，所以建議還是得折騰下后端優(yōu)化。google也有健康檢查工具，會(huì)給你提供建議

檢查客戶端和服務(wù)端網(wǎng)絡(luò)，40秒一般來說不正常；

Chrome -> F12 -> Audits 仔細(xì)看他給的建議；

png 全部轉(zhuǎn) webP，至少全部用 tinyPNG；

找出拖累加載的靜態(tài)資源，上 CDN；

升級(jí) http/2；

預(yù)加載 / 本地緩存；

不是 JSP 的話，換掉 Tomcat，例如 nginx；

關(guān)于耗時(shí)長(zhǎng)的計(jì)算部分可以交給后臺(tái)定時(shí)處理,將結(jié)果緩存,頁面直接調(diào)用緩存就行

優(yōu)化計(jì)算邏輯

檢測(cè)耗時(shí) sql