web性能提升

js優化

1 訪問全局變量總是比訪問局部變量要慢 所以減少全局變量的創建以及訪問

2 減少eval,with語句的使用，

3原生方法更快,儘量使用原生方法

4switch語句較快，如果有很多的if-else判斷儘量使用switch

5JS代碼中的語句數量也會影響所執行的操作的速度

// 避免

var i = 1;

var j = "hello";

var arr = [1,2,3];

var now = new Date();

 

// 提倡

var i = 1,

    j = "hello",

    arr = [1,2,3],

    now = new Date();

// 避免

var name = values[i];

i++;

 

// 提倡

var name = values[i++];

6 js按需加載，代碼分割。

優化DOM

css 優化

1使用圖片精靈

2 壓縮圖片，分割圖片

Vue性能優化

1. 慎用deep watch：
　　 第一次遇到性能問題是文件夾數據量稍大時，操作素材會感覺到明顯的延遲和卡頓，通過chrome的performance分析發現是使用watch時，配置了deep等於true，由於這個文件系統是個大的tree狀對象，每個素材對象又相互引用，導致任何一份數據更新都會通知到這個watcher。
deep:true, 明顯延遲卡頓

2 進行懶加載之後，實現按需加載，那麼項目打包不會把所有js打包進app.[hash].js裏面，優點是可以減少app.[hash].js體積，缺點就是會把其它js分開打包，造成多個js文件，會有多次https請求。如果項目比較大，需要注意懶加載的效果。

routes: [
    { path: "/", redirect: "index" },
    {
    path: "/",
    name: "home",
    component: resolve=>require(["@/views/home"],resolve),
    children: [
      {
        // 員工查詢
        path: "/employees",
        component: resolve=>require(["@/components/employees"],resolve)
      },
    {
      // 首頁
      path: "/index",
      component: resolve=>require(["@/views/index"],resolve)
    },
    {
      // 訪客查詢
      path: "/visitorlist",
      component: resolve=>require(["@/components/visitorlist"],resolve)
    },
    {
      path: "/department",
      component: resolve=>require(["@/views/department"],resolve)
    },
    //識別查詢
    {
      path: "/discriminate",
      component: resolve=>require(["@/components/discriminate"],resolve)
    },

 

2.源碼優化

• v-if 和 v-show選擇調用
  • v-show和v-if的區別是：v-if是懶加載，當狀態爲true時纔會加載，並且爲false時不會佔用佈局空間；v-show是無論狀態是true或者是false，都會進行渲染，並對佈局佔據空間對於在項目中，需要頻繁調用，不需要權限的顯示隱藏，可以選擇使用v-show，可以減少系統的切換開銷。
• 爲item設置唯一key值，
  • 在列表數據進行遍歷渲染時，需要爲每一項item設置唯一key值，方便vuejs內部機制精準找到該條列表數據。當state更新時，新的狀態值和舊的狀態值對比，較快地定位到diff。

• 減少watch的數據
  • 當組件某個數據變更後需要對應的state進行變更，就需要對另外的組件進行state進行變更。可以使用watch監聽相應的數據變更並綁定事件。當watch的數據比較小，性能消耗不明顯。當數據變大，系統會出現卡頓，所以減少watch的數據。其它不同的組件的state雙向綁定，可以採用事件中央總線或者vuex進行數據的變更操作。
• 內容類系統的圖片資源按需加載
  • 對於內容類系統的圖片按需加載，如果出現圖片加載比較多，可以先使用v-lazy之類的懶加載庫或者綁定鼠標的scroll事件，滾動到可視區域先再對數據進行加載顯示，減少系統加載的數據
  •  
  • SSR(服務端渲染)
  • 如果項目比較大，首屏無論怎麼做優化，都出現閃屏或者一陣黑屏的情況。可以考慮使用SSR(服務端渲染)，vuejs官方文檔提供next.js很好的服務端解決方案，但是侷限性就是目前僅支持Koa、express等Nodejs的後臺框架，需要webpack支持。目前自己瞭解的就是後端支持方面，vuejs的後端渲染支持php，其它的不太清楚

  •  

  •  

  •  

  • 如何減少webpack打包體積，加快webpack的打包速度呢？

    解決方法很簡單，打包 vender 時不打包 vue、vuex、vue-router、axios 等，換用國內的 bootcdn 直接引入到根目錄的 index.html 中。

    例如：

    <script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

    在 webpack 裏有個 externals，可以忽略不需要打包的庫

    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios'
    }