關於前端性能優化

1、什麼是前端性能優化?

關於前端性能優化

從用戶訪問資源到資源完整展現在用戶面前的過程中,通過技術手段和優化策略,縮短每個步驟的處理時間從而提升整個資源的訪問和呈現速度。

2、爲什麼要做前端性能優化?

在構建web站點的過程中,任何一個細節都有可能影響網站的訪問速度,如果不瞭解性能優化知識,很多不利於網站訪問速度的因素會產生,從而嚴重影響網站的性能,導致網站訪問速度變慢,用戶體驗低下,最終導致用戶流失。

 3、如何進行前端性能優化

性能黃金法則:只有10%-20%的.最終用戶響應時間花在接收請求的HTML文檔上,剩下的80%-90%時間花在HTML文檔所引用的所有組件(圖片,script,css,flash等等)進行的HTTP請求上。

yahoo前端性能團隊總結的35條黃金定律請見:

1)內容層面

① DNS解析優化

DNS緩存、減少DNS查詢次數(減少來自不同domain的請求的數量);

② 避免重定向

重定向至少訪問兩個不同地址,會減慢訪問速度;

③ 杜絕404

404代表服務器沒有找到資源,網頁中需要加載一個外部腳本,結果返回一個404,不僅阻塞了其他腳本下載,客戶端還會將下載回來的內容(404)當成JavaScript去解析。

2)網絡傳輸階段

① 減少傳輸過程中實體的大小

a.緩存:添加Expires 或Cache-Control報文頭

對一個網站而言,CSS、JavaScript、圖片等靜態資源文件更新的頻率都比較低,而這些文件又幾乎是每次http請求都需要的,如果將這些文件緩存在瀏覽器中,可以極好的改善性能。通過設置http頭中的cache-control和expires的屬性,可設定瀏覽器緩存,添加Expires報文頭,將靜態內容設爲永不過期,或者很長時間後才過期;添加Cache-Control報文頭,來控制網頁的緩存。

ie優化

去除沒有必要的cookie,如果網頁不需要cookie就完全禁掉。

將cookie的大小減到最小。

注意cookie設置的domain級別,沒有必要時不要影響到sub-domain

設置合適的過期時間,較長的過期時間可以提高響應速度。

c.文件壓縮

Accept-Encoding:g-zip,Gzip壓縮傳輸文件通常可以減少70%網頁內容的大小,包括腳本、樣式表、圖片等文件。

② 減少請求的次數

a.文件適當的合併

將多個JS腳本文件合併成一個文件,將多個CSS樣式表文件合併成一個文件,以此來減少文件的下載次數。

b.雪碧圖

把小圖標合成一張大圖,通過給元素的公共css設置background-image爲該合成圖,這樣每個元素都會以該合成圖爲背景,而且頁面也只加載一張合成圖,然後再給每個元素單獨微調其background-position。把多個請求合併成一個。

③ 異步加載

通過async和defer關鍵字或動態創建