前端性能優化方法

時間 2019-11-10

原文原文鏈接

1. 減小http請求數css

經常使用的減小http請求數有如下幾種：html

1）合併圖片。當圖片較多時，能夠合併爲一張大圖，從而減小http請求數。常常變化的圖片可能不太合適，變化相對穩定的就能夠考慮。合併大圖除了能減小http 請求數外，還能夠充分利用緩存來提高性能。前端

2）合併壓縮css樣式表和js腳本，他們的共同目的都是爲了減小http鏈接數。web

3）去掉沒必要要的請求。開發寫代碼或者系統升級以後殘留的無效請求鏈接。瀏覽器

4）充分利用緩存。這裏說的緩存是客戶端側緩存或者說瀏覽器緩存。Expires頭信息是客戶端側緩存的重要依據，格式相似於Expires:sun ,20 Dec 2017 23:00:00 GMT。若是當前時間小於Expires指定的時間，瀏覽器就會從緩存中直接獲取相關的數據信息或html文件，若是當前時間大於Expires指定的時間，瀏覽器會向服務器發送請求來獲取相關數據信息。緩存

以Apache爲例，可在Apache的配置文件httpd.conf中設置Expires。服務器

2. 圖片優化cookie

優化方法：網絡

1）儘量的使用PNG格式的圖片，它相對來講體積較小。ide

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

3）圖片的延遲加載，也叫作賴加載。

3. 使用CDN

CDN即內容分發網絡，可使用戶就近取得所需內容，解決網絡擁擠的情況，提升用戶訪問網站的響應速度。

4. 開啓GZIP

GZIP即數據壓縮，用於壓縮使用Internet傳輸的全部文本資源。開啓GZIP的方法很簡單，到對應的web服務配置文件中設置一下便可。以Apache爲例，在配置文件httpd.conf中添加。

5. 樣式表和JS文件的優化

通常咱們會把css樣式表文件放到文件的頭部。好比，放到<head>標籤中，這樣可讓CSS樣式表儘早地完成下載。對應js腳本文件，通常咱們把他放到頁面的尾部。