此文章列舉一些我在項目中用過的優化手段
1.從減少http請求出發的優化
- css、js的并包（在保持模塊化的情況下實現并包，不然就失去了合并的意義，以往通過seajs、requirejs來實現模塊化的加載，現在可通過webpack、gulp的相應loader來實現合并。最近還有一個新的rollup，能夠大幅度減少無用的代碼）
- css sprite圖（減少小icon的請求，把頁面中的icon都放在一個圖片中，通過background-position來決定顯示哪個部分，一般通過構建工具來實現。以往項目中我都用gulp.spritesmith來合并雪碧圖，他還支持2倍圖的合并，挺好用的）
- 數據緩存（有些數據接口是會被經常請求，但是該數據不會經常變動，這時候可以考慮緩存下來，減少重復請求。比如在一個頁面中劃過一個頭像會動態加載該用戶信息，這時候可以考慮把數據存在變量中，下次用戶再次滑動該頭像時，直接重緩存中獲取，能夠提高用戶體驗并減少服務器壓力。不過數據緩存一定要注意與業務邏輯的解耦。什么數據接口適合緩存呢？這需要取決你的接口數據，如果某個數據接口的數據對用戶操作非常敏感，比如訂單信息，用戶可能會增加或者刪除訂單，這時候就不疑使用緩存了，容易造成客戶困擾。）
+前端緩存（這指的是資源的強緩存和協商緩存。說實話，這很難說是不是前端的優化手段，因為前端人員不需要做什么代碼上的改動，瀏覽器自身會根據上一次請求資源的返回頭來判斷是否進行緩存，不過這的確減少了http請求，所以就列在這里了）
+base64圖片（使用base64化的圖片能減少圖片請求，但是這會增大代碼體積。多大的圖片采用base64？這個度不好把握。vue內置了圖片進行base64，當圖片小于大約是9kb時候使用base64）
2.從代碼角度進行的優化
- 減少dom操作（我們知道，dom操作是非常耗性能的，他會觸發瀏覽器的回流、重繪操作。因而盡可能減少dom的操作，采取在外部創建dom副本，在這個副本上進行操作，然后替換的方式來減少頁面的回流、重繪次數）
- throttle & debounce （在頻繁觸發某個函數的時候，你可能就要做這些優化了，比如圖片懶加載中會有一個滾動監聽。用戶在滾動的時候一直會觸發該滾動函數，如果滾動函數在16ms（大約時間）內無法完成函數執行的話，會造成卡頓，影響用戶體驗。這時候你就可以用throttle & debounce 來進行優化，具體用哪一種則取決于你要的效果。在圖片懶加載中我比較偏愛debounce～，此文章就不展開這兩種方式的討論。）
3.減少dns查詢（我們可能會用多個資源域名來提高頁面的并行下載上限。但增加域名但同時也加大的dns的查詢。這時候可以通過減少域名的方式來減少dns查詢。一般保留2-4個為最佳，但是淘寶用了14個dns。。。可能是業務需求吧。相比減少dns查詢，使用dns預解析更佳符合業務需求。通過link的prefetch屬性來預先解析dns）
4.延遲加載（最常見的應該是首屏渲染，分屏異步加載了）
5.預加載（在空閑時間提前加載可能會用到的組件、控件）
6.通過多域名來實現cookie free（資源文件請求使用不同的域名，這樣由于同源策略，在做資源請求的時候就不會帶上cookie，從而減少帶寬消耗）
