前端優化實踐

2021-07-10 06:18:46 字數 1576 閱讀 6837



問題0:

通過配置nginx日誌和tomcat訪問日誌,進行分析檢視處理速度,發現伺服器處理速度很快,不是伺服器端邏輯處理的問題。那麼就是網路環境或者頁面解析的問題;最終發現以下問題:

問題1:

頁面跳轉過多,對於g網路發起連線慢的環境會對速度體驗造成巨大的問題;

處理辦法:

1,去掉

專案中不必要的跳轉;

問題2:

處理辦法:

1,開啟tomcat壓縮,減少下發資料量; --效果不夠明顯;

3,對比較大的通知美工進行壓縮或者更換格式,盡量減小;

問題3:

通過以上兩個步驟的調優後速度有很大提公升,但是還不盡如人意,尤其g網在網路不穩定的情況,問題更加明顯,表現為時好時壞。

處理辦法:

1,動靜分離,使用阿里雲cdn,將比較大的比較大的js、css和img檔案部署在cdn上,提供伺服器的可用性;--更新問題通過新增版本

來保證清理快取;

2,使用網域名稱預解析和資源預載入,在登陸跳轉頁面對社群中用到的網域名稱和部分資源進行預處理,充分利用跳轉頁;

3,加大網域名稱解析的ttl時間,降低網域名稱解析的時間;

4,配置nginx快取,將img資源檔案在nginx伺服器進行快取,減少到後端伺服器獲取的時間(雖然很小),設定瀏覽器過期時間,減少請求鏈結;

5,設定伺服器快取到期時間和cdn上靜態資源快取時間為30天;

問題4:

登陸過程中在網路不好的情況下,登陸跳轉頁面會有卡的感覺,分析後是因為伺服器端使用了action重定向,原本以為這個是伺服器端的跳轉,其實是通知客戶端瀏覽器開啟乙個新的位址(唉。。。開發知識很重要)

處理方法:

1,修改頁面請求方式,改為ajax方式獲取不在進行重定向

總結:

1,web應用開發不僅僅要保證伺服器端處理速度足夠快,還要保證前端頁面載入和解析速度足夠快;

2,通過日誌和分析工具來判斷問題所在,針對問題去解決問題;

3,規範開發,學習各種開發方式,保證**靈活,動靜分離等。

其他資源:

1,前端速度檢查工具

(1) 

(2) 

2,前端優化基本思路:

(1), 

毫秒必爭,前端網頁效能最佳實踐

(2), 

3,前端自動構建:

(1), 工具

(2), 例項:



Web 前端優化最佳實踐之 Cookie 篇

web 前端優化最佳實踐第三部分面向 cookie 目前只有 2 條實踐規則。1.縮小 cookie reduce cookie size cookie 是個很有趣的話題。根據 rfc 2109 的描述,每個客戶端最多保持 300 個 cookie,針對每個網域名稱最多 20 個 cookie 實際...

效能優化實踐

由於系統表資料量達到百萬級別,所有就遇到了效能優化問題。總結解決問題思路如下 1 從使用者角度來說,介面的資料載入緩慢,超過5秒就是存在效能問題了。解決問題思路,首先,先確定瓶頸點在 確定是 的問題還是sql的問題,可以通過debug除錯或者日誌或者擷取堆疊資訊檢視耗時來確定。2 如果是 層面的問題...

前端異常監控實踐

前端異常監控系統的開發其實並不複雜,開源實現方案也頗多,技術實現成本並不難,痛點有但是並不是都不能解決,根據我們的情況總結了一下 捕獲使用者的操作路徑,根據操作路徑我們去還原使用者的使用場景,來幫助我們快速定位問題的所在。操作路徑分為以下幾個點 當然這塊整體的資料我們會基於cookie和locals...