前端效能優化有哪些方法

coldplay.xixi
發布: 2020-11-13 14:29:08
原創
33793 人瀏覽過

前端效能最佳化方法: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樣式表檔案放到檔案的頭部。例如,放到標籤中,這樣可以讓CSS樣式表儘早完成下載。對應js腳本文件,一般我們都會把他放到頁面的尾部。

6. 使用無cookie網域

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

7. 前端程式碼結構的最佳化

#

以上是前端效能優化有哪些方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板