前端裡面包含的內容是豐富的，它包括HTML，CSS以及JS和圖片等各種各樣的資源。因此前端優化是複雜的和必要的，接下來在文章中為大家介紹前端效能優化的方法。本文在github會進行更新。
優化的目的
優化的目的在於讓頁面載入的更快，對使用者操作響應更及時，為使用者帶來更好的使用者體驗，對於開發者來說優化能夠減少頁面請求數，能夠節省資源。
網路優化
- 減少 http 請求數，css，js, image 等檔案壓縮合並，合理設定 http 請求快取。
- 樣式放頭部，指令碼放底部。
- 使用 CDN。
- 按需載入，顯示進度條或者 loading
css優化
- 避免使用 CSS 表示式
- 儘可能減少CSS選擇器的層級
- 減少 TABLE 佈局
- 移除空的樣式
- 圖片在載入前提前指定寬高或者脫離文件流，可避免載入後的重新計算導致的頁面迴流；
JS優化
- 減少閉包的使用。過多使用閉包會產生很多不銷燬的記憶體，記憶體過多會導致記憶體溢位。
- 避免使用iframe, iframe 會嵌入其它頁面，父頁面渲染的時候，同時渲染子頁面，渲染進度會變慢。
- 減少 dom 操作，減少頁面重繪和重排。使用 css3 動畫
- 儘可能使用事件委託。事件委託可以給動態元素繫結事件，而且基於事件委託實現，整體效能會比一個一個繫結事件高50%。
- 注意防抖和節流
圖片優化：
- 不用圖片，儘量用 css3 代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用 CSS 達成。
- 使用向量圖 SVG 替代點陣圖。對於絕大多數圖案、圖示等，向量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支援 SVG 了，所以可放心使用！
- 使用恰當的圖片格式。我們常見的圖片格式有 JPEG、GIF、PNG。基本上，內容圖片多為照片之類的，適用於 JPEG。而修飾圖片通常更適合用無失真壓縮的 PNG。GIF 基本上除了 GIF 動畫外不要使用。且動畫的話，也更建議用 video 元素和視訊格式，或用 SVG 動畫取代。
- 按照 HTTP 協議設定合理的快取。
- 使用字型圖示 webfont、CSS Sprites 等。
- 用 CSS 或 JavaScript 實現預載入。WebP 圖片格式能給前端帶來的優化。
- WebP 支援無損、有失真壓縮，動態、靜態圖片，壓縮比率優於 GIF、JPEG、JPEG2000、PG 等格式，非常適合用於網路等圖片傳輸。
圖片懶載入與預載入
圖片懶載入的原理就是暫時不設定圖片的 src 屬性，而是將圖片的 url 隱藏起來，比如先寫在 data-src 裡面，等某些事件觸發的時候(比如滾動到底部，點選載入圖片)再將圖片真實的 url 放進 src 屬性裡面，從而實現圖片的延遲載入
圖片預載入，是指在一些需要展示大量圖片的網站，實現圖片的提前載入。從而提升使用者體驗。常用的方式有兩種，一種是隱藏在 css 的 background 的 url 屬性裡面，一種是通過 javascript 的 Image 物件設定例項物件的 src 屬性實現圖片的預載入。相關程式碼如下：
為什麼要將圖片轉為base64格式
圖片的 base64 編碼就是可以將一副圖片資料編碼成一串字串，使用該字串代替影像地址;
-
提升效能: 網頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的, 圖片的下載始終都要向伺服器發出請求，要是圖片的下載不用向伺服器發出請求，base64可以隨著 HTML 的下載同時下載到本地.減少https請求。
-
加密: 讓使用者一眼看不出圖片內容 , 只能看到編碼。
-
方便引用: 在多個檔案同時使用某些圖片時, 可以把圖片轉為base64格式的檔案, 把樣式放在全域性中, 比如common.css, 以後在用的時候就可以直接加類名, 二不需要多層找檔案路徑, 會提升效率