前端性能的優化，最直接的體現在用戶的體驗上。當用戶打開一個站點時，加載時間在十幾秒以上，肯定要瘋了。以下是自己的見解加解讀小冊內容。強烈建議大家去看看這本掘金小冊，點擊自動跳轉
- 自己知道的性能優化。
- 圖片處理(svg,icon等）
- 靜態資源使用CDN
- 圖片/視頻懶加載
- 文件按需加載
- 代碼/css壓縮
...
- 小冊介紹性能優化要點
- 圖片優化
- DNS預解析
- 節流
- 防抖
- 預加載
- 預渲染
- 懶執行
- 懶加載
- CDN
圖片處理
- 修飾類效果不用圖片，修飾類的圖片可以用CSS去代替，例如 箭頭，圓角，三角形等，具體做法可自行google查看以下。
- 一些圖標類型的小圖片，盡量用font-icon 去表示。
- 使用精靈圖/雪碧圖(Sprite)，然后利用圖片的定位取到對應的圖。
- 小圖片使用base64轉換。這個在目前vue-cli的webpack配置已經自動實現，可以進行在webpack中配置大小。
- 商品的縮略圖，尤其是移動端，直接讓設計師按照提供相同大小的圖片，盡量不要用css去控制圖片的大小。
靜態資源CDN(內容分發網絡 content delivery network)
假設A地部署web應用，但是B地的人要去訪問該站點，瀏覽器根據域名解析再通過DNS找到A地的服務器地址，然后去請求該站點的資源再返回B地，中間會浪費一些時間，盡管超級短。那為什么不在B地使用服務器緩存靜態資源呢，這樣請求的時間肯定就減少了許多。這就是CDN的一個基本原理，就是盡可能多的在用戶的附近部署靜態資源服務器，用戶訪問時就會直接訪問到，自然訪問速度就上來了。
- 靜態資源使用CDN緩存
- CDN域名盡量與主站域名不同，否則會帶上cookie，浪費流量
圖片懶加載
原理
- 將要顯示的圖片/視頻地址先保存在對應 標簽 的任一屬性上，標簽先給默認你地址，然后該標簽在可視區域時，就替換掉默認地址。
注意點
- 滾動防抖
- 判斷圖片/視頻是否顯示成功
目前來說，大部分的開發都不會自己去實現一個，由于有很好的插件來實現。vue可以使用 vue-lazyload
路由，文件按需加載(主要依靠webpack)
當打包構建應用時，JavaScript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。
路由按需加載
代碼壓縮，css預處理器
如果使用腳手架搭建起來的項目，webpack已經幫我們配置好了壓縮的方式引入了各種相應的loader，我們直接用就好。
css預處理器 sass less stylus
- 更加方便的使用css
- 定義變量，引用，嵌套，作用域
- 本質上還是css，注意嵌套層級，最好不超過4級。
防抖 節流 操作鎖
- 防抖：事件一直觸發，停止了才去執行相應代碼。(scroll,input,change事件等)
- 節流：事件一直觸發，隔一段時間去執行一次。(input事件，change事件等)
- 操作鎖: 避免重復執行事件時，可以設置一個鎖，直到返回結果才解鎖，禁止多次請求。
