前端性能優化總結：
1.減小 HTTP 請求數
前端開發80%以上的響應時間浪費在圖片、樣式、腳本等資源上傳下載上，然而大多資源是必不可少的，咱們減小 HTTP 請求數從如下方面進行：css
①合併文件（JS/CSS文件/圖片）前端
合併圖片，當圖片較多時，經過合併爲一張大圖，不只能減小http請求數，還能利用緩存來提高性能。web
合併CSS、JS文件，例如3個css文件可能會發出3此請求，用戶等待時間較長，合併以後只須要發出一次請求，節省請求時間，加快頁面的加載，用戶體驗感上升。瀏覽器
②行內圖片（Base64 編碼）緩存
用 data: URL模式來把圖片嵌入頁面，會增長HTML文件的大小，經過編碼的字符串將圖片內嵌到網頁文本中，會有效減小頁面的大小。性能優化
③緩存策略服務器
友好充分利用緩存，經過在請求頭設置緩存屬性，下次再次訪問能夠直接從本地獲取資源，減小了沒必要要的數據傳輸，節省帶寬、減小服務器的負擔，提高網站性能、加快了客戶端加載網頁的速度。Expires 設置了一個時間，只要在這個時間以前，瀏覽器都不會請求文件，而是直接使用緩存。cache-control設置過時時間長度（秒），在這個時間範圍內，瀏覽器就會直接讀取緩存，當expires和Cache-Control都存在時，Cache-Control的優先級更大。網絡
- 對於靜態組件：經過設置一個遙遠的未來時間做爲
Expires來實現永不失效 - 多餘動態組件：用合適的
Cache-ControlHTTP 頭來讓瀏覽器進行條件性的請求
2.使用CDN
CDN即內容分發網絡，它是一組分佈在多個不一樣地理位置的 Web 服務器，可使用戶就近取得所需內容，解決網絡擁擠的情況，提升用戶訪問網站的響應速度。app
3.優化資源加載位置
將 CSS 放在文件頭部，JavaScript 文件放在底部，全部放在 head 標籤裏的 CSS 和 JS 文件都會堵塞渲染。若是這些 CSS 和 JS 加載和解析時間長，頁面顯示就是空白，將JS 文件要放在底部，會先解析HTML以後在解析JS。而CSS 文件還要放在頭部，能夠避免沒有數據的頁面被用戶看到，體驗很差。JS 文件若是想要放在頭部，只要給 script 標籤加上 defer 屬性就能夠了，異步下載，延遲執行。異步
4.開啓GZIP
Gzip即數據壓縮，用於壓縮使用Internet傳輸的全部文本資源。將資源在服務端進行壓縮，而後發送給瀏覽器後再進行解壓，這樣會下降文件傳輸大小，提升網頁加載性能。開啓GZIP的方法，到對應的web服務配置文件中設置。以Apache爲例，在配置文件httpd.conf中添加：Accept-Encoding: gzip,deflate
例如，用 Vue 開發的項目構建後生成的 app.js 文件大小爲 3.5MB，使用 Gzip 壓縮後只有 1.4Mb。
5.圖片優化
①儘量的使用PNG格式的圖片，它相對來講體積較小。
②對於不一樣格式的圖片，在上線以前最好進行必定的優化。
③圖片的延遲加載（懶加載）
在頁面中，先不給圖片設置路徑，只有當圖片出如今瀏覽器的可視區域時，纔去加載真正的圖片，這就是延遲加載。
④響應式圖片
瀏覽器可以根據屏幕大小自動加載合適的圖片。例如展現50*50大小的圖片，用的是500*500的，應該展現適合的圖片。
⑤下降圖片質量
下降圖片質量，圖片100% 的質量和 90% 的質量一般看不出來區別，適當下降圖片質量，不會影響頁面展現。
⑥利用 CSS3 效果代替圖片
CSS畫的圖片一般是原圖圖片大小的幾分之一甚至幾十分之一。有不少圖片使用 CSS 效果（漸變、陰影等）就能畫出來，這種狀況選擇 CSS3 效果更好。