前端效能優化

1.儘量減少 http 請求

有幾種常見的方法能切實減少 http 請求：

1、 合併檔案：合併指令碼跟樣式檔案，如可以把多個 css 檔案合成乙個，把多個 js 檔案合成乙個。

2、 合併：css sprites 利用 css background 相關元素進行背景圖絕對定位,把多個合成乙個。

1.1 使用 http / 2.0

1.因為瀏覽器會有併發請求限制，在 http / 1.1 時代，每個請求都需要建立和

斷開，消耗了好幾個 rtt 時間，並且由於 tcp 慢啟動的原因，載入體積大

的檔案會需要更多的時間

2. 在 http / 2.0 中引入了多路復用，能夠讓多個請求使用同乙個 tcp 鏈結

，極大的加快了網頁的載入速度。並且還支援 header 壓縮，進一步的減

少了請求的資料大小

良好的快取策略可以降低資源的重複載入提高網頁的整體載入速度

通常瀏覽器快取策略分為兩種：強快取和協商快取

特別是對於js、css、等變動較少的檔案，使用強快取。

強快取

實現強快取可以通過兩種響應頭實現：expires和 cache-control 。強快取表示在快取期間不需要請求，state code為 200

expires 是 http / 1.0 的產物，表示資源會在 wed, 22 oct 2018 08:41:00 gmt

後過期，需要再次請求。並且 expires 受限於本地時間，如果修改了本地時間，可能會造成快取失效

cache-control 出現於 http / 1.1，優先順序高於 expires 。該屬性表示資源會在 30

秒後過期，需要再次請求

如果快取過期了，我們就可以使用協商快取來解決問題。協商快取需要請求，如果快取有效會返回 304

協商快取需要客戶端和服務端共同實現，和強快取一樣，也有兩種實現方式

last-modified 表示本地檔案最後修改日期，if-modified-since 會將

last-modified的值傳送給伺服器，詢問伺服器在該日期後資源是否有更新，有更新的話就會將新的資源傳送回來

但是如果在本地開啟快取檔案，就會造成 last-modified 被修改，所以在 http / 1.1 出現了 etag

etag 類似於檔案指紋，if-none-match 會將當前 etag 傳送給伺服器，詢問該資源 etag是否變動，有變動的話就將新的資源傳送回來。並且 etag 優先順序比 last-modified 高

3.dns預解析 ,js的預載入

3.1.dns預解析

dns 解析也是需要時間的，可以通過預解析的方式來預先獲得網域名稱所對應的 ip

在開發中，可能會遇到這樣的情況。有些資源不需要馬上用到，但是希望盡早獲取，這時候就可以使用預載入

預載入其實是宣告式的 fetch ，強制瀏覽器請求資源，並且不會阻塞 onload 事件，可以使用以下**開啟預載入

預載入可以一定程度上降低首屏的載入時間，因為可以將一些不影響首屏但重要的檔案延後載入，唯一缺點就是相容性不好

預渲染雖然可以提高頁面的載入速度，但是要確保該頁面百分百會被使用者在之後開啟，否則就白白浪費資源去渲染

4.1 懶執行

懶執行就是將某些邏輯延遲到使用時再計算。該技術可以用於首屏優化，對於某些耗時邏輯並不需要在首屏就使用的，就可以使用懶執行。懶執行需要喚醒，一般可以通過定時器或者事件的呼叫來喚醒

5.檔案優化

5.1優化

對於如何優化，有 2 個思路

減少畫素點

減少每個畫素點能夠顯示的顏色

1.不用。很多時候會使用到很多修飾類，其實這類修飾完全可以用 css 去代替。

2. 對於移動端來說，螢幕寬度就那麼點，完全沒有必要去載入原圖浪費頻寬。一般都用 cdn 載入，可以計算出適配螢幕的寬度，然後去請求相應裁剪好的

3.小圖使用 base64格式.

4.將多個圖示檔案整合到一張中（雪碧圖）.

5.選擇正確的格式：

.對於能夠顯示 webp 格式的瀏覽器盡量使用 webp 格式。

因為 webp 格式具有更好的影象資料壓縮演算法，能帶來更小的體積，而且擁有肉眼識別無差異的影象質量，缺點就是相容性並不好

.小圖使用 png，其實對於大部分圖示這類，完全可以使用 svg 代替

.**使用 jpeg

6.cdn

cdn(內容分發網路)

靜態資源盡量使用 cdn 載入，由於瀏覽器對於單個網域名稱有併發請求上限，可以考慮使用多個 cdn 網域名稱。對於 cdn載入靜態資源需要注意 cdn 網域名稱要與主站不同，否則每次請求都會帶上主站的 cookie

前端效能優化

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

前端效能優化

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

前端效能優化

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