前端效能優化

2021-08-20 06:49:30 字數 1262 閱讀 9931

隨著現在**越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說「乙個**開啟時間超過8s,網民就會流失70%以上。」,這種說法我覺得不是很正確的,除非是非常重要、必須要使用的**,否則超過5s我基本直接關了,體驗太差。所以,使用者「忍讓」是有極限的,要想把握更多的使用者,增強使用者體驗,效能優化是必不可少的一環。

1.  開啟gzip壓縮accept-encoding:gzip, deflate

gzip on;
讓我們來看下效果:

可以看出,vendor直接從744k壓縮到了258k,還是很強大的。

瀏覽器分為兩種快取,強快取與協商快取(也被稱為弱快取),其中協商快取不用我們自己配置,下面我們通過連續兩次重新整理頁面來觀察一下協商快取。

注意我們這裡使用的是tomcat,你可能需要的配置與我這個並不一樣,但是這並不關鍵,我們主要需要的是expires這項配置,他表示了我們希望快取的時間,我們配置的js與css快取時間為10天,而則快取30天。一起開啟瀏覽器看一下效果。

from memory cache表明此時是從記憶體中直接取出快取,並沒有傳送http請求,這對一些與我們的依賴包vendor相當有用,我們完全可以給這兩個資源設定乙個較大的快取時間,這樣當使用者訪問第一次後,這些資源始終會保持在使用者的快取中,就算我們之後更改了很多我們的業務**,只要依賴沒有更改,使用者只用載入一些小的業務**檔案就可以了,對於較大的vendor則依然可以從快取中獲取。

注意點:

強快取、弱快取只是名字上的區別並沒有什麼強弱之分,其實對於一般的瀏覽器來說重新整理就會使你當前請求資源的強快取失效,因為重新整理的時候會請求頭中會攜帶乙個max-age=0或是no-cache,注意我這裡說的當前請求資源指的一般是你頁面的html文件,但是對於文件中外鏈的js與img等,不會因為重新整理導致強快取失效。不過如果你直接請求的是乙個js檔案,那麼重新整理後這個js檔案強快取也會失效。

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

原則 多使用記憶體和快取等儲存,減少cpu計算,減少網路請求。從載入頁面和靜態資源,及頁面渲染這兩方面入手 1.載入資源優化 a.靜態資源的壓縮合併 b.靜態資源快取 c.使用cdn讓資源載入更快 如搜尋boot cdn d.ssr後端渲染,資料直接輸出到html中 如jsp,php,資料直接輸出到...