Web前端性能優化（一）

1. 靜態資源的壓縮與合併

咱們在開發的時候會習慣縮進和寫註釋，方便咱們在平常的維護，但將代碼上傳至服務端後，咱們徹底能夠把那些空格、製表符、換行符進行壓縮，以此減小請求資源的大小；一樣的，咱們在服務端所引用的第三方庫進行合併，能減小 HTTP 的請求數量

• 將 HTML 文件裏的空格、製表符、換行符進行壓縮，並剔除全部註釋
• 將 CSS 文件裏的空格、製表符、換行符進行壓縮，無效代碼刪除，CSS 語義合併
• 將 JS 文件壓縮與混亂，無效字符的刪除，剔除註釋，代碼語義的縮減和優化（變量名過長，使用其餘字符進行代替），代碼保護

代碼壓縮可使用 開源中國_在線工具 進行壓縮，不過這種方式面對須要大量壓縮的代碼會顯得效率低下，推薦你們使用 html-minifier 插件進行壓縮，CSS 還可使用 clean-css 進行壓縮，JS 可使用 uglifyjs2 進行壓縮

在 CSS 或 JS 文件中引用第三方插件，即代表咱們在引用第三方資源時須要請求大量的文件，在 keep-alive 模式下，文件與文件直接會插入上行請求，增長網絡延遲，受到丟包影響會更嚴重，通過代理服務器時也可能會斷開

在將文件進行合併前，有兩個地方須要你們注意下，① 將公共庫和業務庫分開合併，這樣的好處是，咱們迭代版本的時候，只須要更新業務庫便可，在 Vue, React 框架中也是做一樣處理；② 如果在 Vue 或 React 項目中，還建議你們將不一樣頁面所須要的 JS 進行合併，只有當路由到該頁面的時候，才請求該頁面所須要的組件

合併以後的文件要佔據更多容量，所請求時間更久，如果首屏渲染依賴 JS，則會出現首次加載出現白屏的狀況，這種場景通常存在於Vue，React框架使用過程當中，在沒有使用服務端渲染的狀況下，是將整個過程經過框架進行接管的

咱們在標記 JS 文件是否被更改時，一般會在該 JS 文件後加一個 MD5 戳，用來惟一標識該 JS 文件是否被更改，如果合併前的任一個文件有改動，那麼合併後的整個文件緩存都會失效

文件合併的方式一樣可經過在線網站或 NodeJS 進行合併，在此再也不復述

2. 圖片優化

咱們通常所用到的圖片格式爲 jpg, png, webp, svg，而不一樣的圖片格式所對應的業務場景也不相同，jpg 格式圖片爲有損壓縮，壓縮率高，不支持透明，適用大部分不須要透明圖片的業務場景；png 格式圖片支持透明，瀏覽器兼容好，其中 png8 爲 256 色，支持透明，png24 爲 2^24 色，不支持透明，png32 爲 2^24 色，支持透明；webp 格式圖片壓縮程度好，在 iOS webview 中有兼容性問題，推薦在 Android 中使用該格式圖片；svg 格式圖片，將圖片內容內嵌到 HTML 中，經過使用 iconfont 解決 icon 問題，減小 HTTP 請求，適用於圖片樣式相對簡單的場景

webp 爲谷歌開發的圖片格式，其優點體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 jpeg 和 png 上的轉化效果都很是優秀、穩定和統一

雪碧圖 CSS sprite 就是講網站上用到的一些 icon 整合到一張單獨圖片中，經過 background-position 屬性來顯示相對應的圖片，使用雪碧圖的優勢爲，減小你的網站 HTTP 請求數量，相對而言，加載比較慢

一樣推薦幾個圖片優化的在線網站， 圖片壓縮 TinyPNG，PNG 轉換 Webp ，CSS Sprite 製做

End of File

行文過程當中出現錯誤或不妥之處在所不免，但願你們可以給予指正，以避免誤導更多人，最後，若是你以爲個人文章寫的還不錯，但願可以點一下喜歡和關注，爲了我能早日成爲簡書優秀做者獻上一發助攻吧，謝謝！^ ^