javascript - 頁面加載慢,有什么優(yōu)化方案
問題描述
哪位大神幫忙看一下,頁面加載很慢是什么原因,希望能具體分析一下,有什么好的解決辦法線上地址http://cqwind.chinacloudapp.c...
問題解答
回答1:看了圖,耗時最長的幾個都是Ajax/XHR請求。
由于靜態(tài)資源加載很快,所以不可能是網(wǎng)速的原因。所以你可以:
在前端盡量合并HTTP請求。
讓后臺優(yōu)化一下,提高相應(yīng)速度。(你的情況看,最關(guān)鍵的地方應(yīng)該在這里;如果后臺甩鍋,那你換個地方模擬HTTP請求,如使用Postman之類的工具,用事實說話。)
回答2:1.壓縮js,css,看了都沒壓縮
2.壓縮圖片
3.可以把css這些打包,或者建議第一次加載得時候,做一個loading層
這些資源文件最好都壓縮打包了一下,用gulp最簡單就能實現(xiàn),還有如果提供更好的用戶體驗,可以學(xué)學(xué)google earth,第一次訪問加載所有資源,bundle,提供一個loading層。后面的動態(tài)數(shù)據(jù)要么輪訓(xùn),要么直接做websocket
還有就是我仔細(xì)看了,你得數(shù)據(jù)是調(diào)用的耗時比較嚴(yán)重,所以建議還是得折騰下后端優(yōu)化。google也有健康檢查工具,會給你提供建議
檢查客戶端和服務(wù)端網(wǎng)絡(luò),40秒一般來說不正常;
Chrome -> F12 -> Audits 仔細(xì)看他給的建議;
png 全部轉(zhuǎn) webP,至少全部用 tinyPNG;
找出拖累加載的靜態(tài)資源,上 CDN;
升級 http/2;
預(yù)加載 / 本地緩存;
不是 JSP 的話,換掉 Tomcat,例如 nginx;
回答4:關(guān)于耗時長的計算部分可以交給后臺定時處理,將結(jié)果緩存,頁面直接調(diào)用緩存就行
優(yōu)化計算邏輯
檢測耗時 sql
