總結前端性能優化的方法

前端裏面包含的內容是豐富的，它包括HTML，CSS以及JS和圖片等各類各樣的資源。所以前端優化是複雜的和必要的，接下來在文章中爲你們介紹前端性能優化的方法。本文在github會進行更新。

優化的目的

優化的目的在於讓頁面加載的更快，對用戶操做響應更及時，爲用戶帶來更好的用戶體驗，對於開發者來講優化可以減小頁面請求數，可以節省資源。

網絡優化

1. 減小 http 請求數，css，js, image 等文件壓縮合並，合理設置 http 請求緩存。
2. 樣式放頭部，腳本放底部。
3. 使用 CDN。
4. 按需加載，顯示進度條或者 loading

css優化

1. 避免使用 CSS 表達式
2. 儘量減小CSS選擇器的層級
3. 減小 TABLE 佈局
4. 移除空的樣式
5. 圖片在加載前提早指定寬高或者脫離文檔流，可避免加載後的從新計算致使的頁面迴流；

JS優化

1. 減小閉包的使用。過多使用閉包會產生不少不銷燬的內存，內存過多會致使內存溢出。
2. 避免使用iframe, iframe 會嵌入其它頁面，父頁面渲染的時候，同時渲染子頁面，渲染進度會變慢。
3. 減小 dom 操做，減小頁面重繪和重排。使用 css3 動畫
4. 儘量使用事件委託。事件委託能夠給動態元素綁定事件，並且基於事件委託實現，總體性能會比一個一個綁定事件高50%。
5. 注意防抖和節流

圖片優化：

1. 不用圖片，儘可能用 css3 代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用 CSS 達成。
2. 使用矢量圖 SVG 替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持 SVG 了，因此可放心使用！
3. 使用恰當的圖片格式。咱們常見的圖片格式有 JPEG、GIF、PNG。基本上，內容圖片多爲照片之類的，適用於 JPEG。而修飾圖片一般更適合用無損壓縮的 PNG。GIF 基本上除了 GIF 動畫外不要使用。且動畫的話，也更建議用 video 元素和視頻格式，或用 SVG 動畫取代。
4. 按照 HTTP 協議設置合理的緩存。
5. 使用字體圖標 webfont、CSS Sprites 等。
6. 用 CSS 或 JavaScript 實現預加載。WebP 圖片格式能給前端帶來的優化。
7. WebP 支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於 GIF、JPEG、JPEG2000、PG 等格式，很是適合用於網絡等圖片傳輸。

圖片懶加載與預加載

圖片懶加載的原理就是暫時不設置圖片的 src 屬性，而是將圖片的 url 隱藏起來，好比先寫在 data-src 裏面，等某些事件觸發的時候(好比滾動到底部，點擊加載圖片)再將圖片真實的 url 放進 src 屬性裏面，從而實現圖片的延遲加載

圖片預加載，是指在一些須要展現大量圖片的網站，實現圖片的提早加載。從而提高用戶體驗。經常使用的方式有兩種，一種是隱藏在 css 的 background 的 url 屬性裏面，一種是經過 javascript 的 Image 對象設置實例對象的 src 屬性實現圖片的預加載。相關代碼以下：

爲何要將圖片轉爲base64格式

圖片的 base64 編碼就是能夠將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址;

1. 提高性能: 網頁上的每個圖片，都是須要消耗一個 http 請求下載而來的, 圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，base64能夠隨着 HTML 的下載同時下載到本地.減小https請求。

2. 加密: 讓用戶一眼看不出圖片內容 , 只能看到編碼。

3. 方便引用: 在多個文件同時使用某些圖片時, 能夠把圖片轉爲base64格式的文件, 把樣式放在全局中, 好比common.css, 之後在用的時候就能夠直接加類名, 二不須要多層找文件路徑, 會提高效率

相關文章

搭建一個vue-cli的移動端H5開發模板

封裝一個toast和dialog組件併發布到npm

從零開始構建一個webpack項目

總結幾個webpack打包優化的方法

一文讀盡前端路由、後端路由、單頁面應用、多頁面應用

從一道面試題中總結JS做用域，this 指向和箭頭函數

關於幾個移動端軟鍵盤的坑及其解決方案

淺談JavaScript的防抖與節流

淺談JavaScript的 深拷貝和淺拷貝