前端效能優化有哪些方法

前端效能優化方法：1、減少http請求數；2、圖片優化；3、使用CDN；4、開啟GZIP；5、樣式表和JS檔案的優化；6、使用無cookie域名；7、前端程式碼結構的優化。

前端效能優化方法：

1. 減少http請求數

常用的減少http請求數有以下幾種：

1）合併圖片。當圖片較多時，可以合併為一張大圖，從而減少http請求數。經常變化的圖片可能不太合適，變化相對穩定的就可以考慮。合併大圖除了能減少http 請求數外，還可以充分利用快取來提升效能。

2）合併壓縮css樣式表和js指令碼，他們的共同目的都是為了減少http連線數。

3）去掉不必要的請求。開發寫程式碼或者系統升級之後殘留的無效請求連線。

4）充分利用快取。這裡說的快取是使用者端側快取或者說瀏覽器快取。Expires頭資訊是使用者端側快取的重要依據，格式類似於Expires:sun ,20 Dec 2017 23:00:00 GMT。如果當前時間小於Expires指定的時間，瀏覽器就會從快取中直接獲取相關的資料資訊或html檔案，如果當前時間大於Expires指定的時間，瀏覽器會向伺服器傳送請求來獲取相關資料資訊。

以Apache為例，可在Apache的組態檔httpd.conf中設定Expires。

2. 圖片優化

優化方法：

1）儘可能的使用PNG格式的圖片，它相對來說體積較小。

2）對於不同格式的圖片，在上線之前最好進行一定的優化。

3）圖片的延遲載入，也叫做賴載入。

3. 使用CDN

CDN即內容分發網路，可以使使用者就近取得所需內容，解決網路擁擠的狀況，提高使用者存取網站的響應速度。

4. 開啟GZIP

GZIP即資料壓縮，用於壓縮使用Internet傳輸的所有文字資源。開啟GZIP的方法很簡單，到對應的web服務組態檔中設定一下即可。以Apache為例，在組態檔httpd.conf中新增。

5. 樣式表和JS檔案的優化

一般我們會把css樣式表檔案放到檔案的頭部。比如，放到<head>標籤中，這樣可以讓CSS樣式表儘早地完成下載。對應js指令碼檔案，一般我們把他放到頁面的尾部。

6. 使用無cookie域名

無cookie域名的概念:當傳送一個請求時，同時還要請求一張靜態的圖片和傳送cookie時，伺服器對於這些cookie不會做任何使用，也就是說這些cookie沒什麼用，沒不要隨請求一同傳送。

7. 前端程式碼結構的優化

以上就是前端效能優化有哪些方法的詳細內容，更多請關注TW511.COM其它相關文章！