前端性能優化分析

一、長串列性能優化
1.（只渲染少部磁區域的內容，減少重新渲染組件和dom節點的時間）可使用vue-virtual-scroll-list 或者vue-virtual-scroller 或者自己實作一個虛擬的滾動串列，主要用到的技術是DOM記憶體回收、滾動錨定
二、圖片懶加載
2.當加載一些密集型的圖片的網頁中，只加載可視區域內的圖片 避免一次性加載過多的圖片導致請求阻塞原理是 頁面中的img標簽的src屬性 指向一個默認的小的圖片或者為空，然后自定義屬性指向真實的圖片 當載入頁面時 把可視區域的img的自定義真實圖片的值賦值給src 然后監聽滾動事件，根據可見區域高度 把用戶即將看到的圖片再加載
三、事件委托或者事件代理機制
3.把原本系結在子元素上的回應事件到父元素上 例如一個串列需要系結點擊事件 每一個item都需要點擊事件 傳統的方法 會用for回圈遍歷整個串列為每一個item都系結點擊事件，串列中的元素數量過大的話，需要系結大量的點擊事件，這種情況下 可以使用事件委托
四、防抖和節流
4.比如input輸入框模糊搜索 輸入框輸入值的時候，只要按下按鍵,就會發送請求，其實是應該用戶輸入完整的字符后再去請求介面，可以設定延遲，，當你在頻繁的輸入時，并不會發送請求，只有當你在指定間隔內沒有輸入時，才會執行函式，如果停止輸入但是在指定間隔內又輸入，會重新觸發計時，節流指的是我們在不斷輸入時，ajax會按照我們設定的時間，一定事件間隔內執行一次，就算按下鍵盤 也不會重新執行，也是在規定的時間間隔內只執行一次 防抖和節流都是防止某一時間內頻繁觸發的操作 但是原理不同：防抖是某一段時間內只執行一次，而函式節流是間隔時間執行
4.1使用場景：Search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源，
4.2.window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次，
節流：1.滑鼠不斷點擊觸發，mousedown(單位時間內只觸發一次)，2.監聽滾動事件，比如是否滑到底部自動加載更多，用throttle（節流）來判斷，

五、Dom優化以及gzip壓縮
洗掉不必要的代碼和注釋包括空格等，盡量做到最小化檔案 ，線上環境把js，css，圖片等壓縮，盡量減少檔案的大小，前端壓縮方式有很多種 比如前端打包壓縮的有grunt，gulp，webpack，后臺實作檔案壓縮的話：開啟gzip壓縮的請求頭欄位，Response Headers里的 content-encoding: gzip，前端進行壓縮的話可以使用compress-webpack-plugin插件，先修改修改config目錄下的index.js，開啟gzip

如果沒有默認安裝compress-webpack-plugin插件，請先安裝，然后在在build目錄下的webpack.prod.conf.js添加代碼

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

然后就可以npm run build打包了，打包后會生成類似 ***.js.gz的檔案，

但這時候服務器還是不支持gzip的，因此，我們要來簡單的配置一下，
可以使用nginx來進行配置 ，打開conf/ngxin.conf，在http、server、location下加以下代碼，詳情點擊> nginx檔案，

gzip_static on;
gzip_http_version   1.1;
gzip_proxied        expired no-cache no-store private auth;
gzip_disable        "MSIE [1-6]\.";
gzip_vary           on;

最后 nginx -s reload 重啟，
六、css的優化
1.盡量避免使用table布局
2.避免設定多層行內樣式
3.避免使用 CSS 運算式（例如：calc()）
4.將影片效果應用到 position 屬性為 absolute 或 fixed 的元素上，
5.提取組件的 CSS 到單獨到檔案
6.圖片編碼優化，盡量使用svg和字體圖示
七、Vue UI組件庫的按需加載
為了快速開發前端專案，經常會引入現成的UI組件庫如ElementUI、iView等，但是他們的體積和他們所提供的功能一樣，是很龐大的， 而通常情況下，我們僅僅需要少量的幾個組件就足夠了，但是我們卻將龐大的組件庫打包到我們的原始碼中，造成了不必要的開銷，

不過很多組件庫已經提供了現成的解決方案，如Element出品的babel-plugin-component和AntDesign出品的babel-plugin-import 安裝以上插件后，在.babelrc配置中或babel-loader的引數中進行設定，即可實作組件按需加載了，
{
“presets”: [[“es2015”, { “modules”: false }]],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”
}
]
]
}
八、單頁應用的按需加載（為給客戶更好的客戶體驗，首屏組件加載速度更快一些，解決白屏問題，）
可以采用.vue-router 路由懶加載（懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載），常見的懶加載方式有兩種：即使用vue異步組件 和 ES中的import
未使用懶加載的路由代碼如下：

 import Vue from 'vue'
                import Router from 'vue-router'
                import HelloWorld from '@/components/HelloWorld'

                Vue.use(Router)

                export default new Router({
                  routes: [
                    {
                      path: '/',
                      name: 'HelloWorld',
                      component:HelloWorld
                    }
                  ]
                })

1.vue異步組件實作懶加載， 它主要是使用了resolve的異步機制，用require代替了import,實作按需加載，下面是代碼示例，　方法如下：component：resolve=>(require([‘需要加載的路由的地址’])，resolve)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此處省去之前匯入的HelloWorld模塊 */
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

方法2：es6提出的import方法（-----最常用-------）
　方法如下：const HelloWorld = （）=>import(‘需要加載的模塊地址’)

（不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

通過懶加載后打包的js檔案會很多，而非懶加載的打包后一般只有一個js檔案，