項目中所作的優化

1. vue實現較多，放棄使用zepto。 

2. swiper.js在進入詳情頁的時候再開始加載。 

3. flexible.js、reset.css 是否要內聯，由於用戶可能會常常登陸，若是使用內聯的方式那麼就不會被緩存了， 因此若是放在文件中引入，能夠緩存。

4. 對於接受的數據，漢字不是UTF-8，因此這邊顯示是亂碼，瀏覽器就須要話費時間去解析這個亂碼，因此通過後端的調試，請求獲得的就是正確的漢字，這樣前端瀏覽器就不會解析亂碼了。

 

 

 

 

 

 

優化加載方式

 

　　使用activated、keep-alive、 beforeRouterEnter實現頁面加載的完美化！

    beforeRouteEnter (to, from, next) { 
      next();
      if (from.path == '/microComBuilding') {
        sessionStorage.setItem('create', 'true');
      } else {
        sessionStorage.setItem('create', 'false');
      }

      if (from.path == '/') {
        sessionStorage.setItem('reload', 'true');
      } else {
        sessionStorage.setItem('reload', 'false');
      }
    },

 

 

    activated () {
      if (sessionStorage.getItem('create') == 'true') {
        if (sessionStorage.getItem('reload') == 'false') {
          this.getClassify(); 
          this.RESET_VALUE();
        }
      } else {
        // 什麼都不作
      }
    },

　　思路很簡單，就是將commodity頁面設置爲靜態的。 可是從微商廈進入時數據就得不到刷新了。 若是但願刷新，就必需要設置爲動態的，可是動態的頁面在切換的時候所帶來的消耗有時巨大的。因此，咱們能夠經過路由來判斷。可是上面的代碼仍是有問題。

 

　　可是在activated 中的問題就是若是是第一次進來呢，那麼created和activated 就會同時發送兩個數據， 這樣的狀況是咱們不想看到的，因此咱們能夠根據store中的state再添加一次判斷，就是若是第一次進來，那麼activated 鉤子函數和created的鉤子函數相差的間隔只有20ms，因此這個獲取店鋪信息的數據是不可能請求的回來的，從network中能夠看到這個請求的時間約是間隔時間的10倍以上，咱們能夠認爲遠遠大於，因此下面的代碼是沒有問題的。

    activated () {
      console.log('activeated' ,new Date().getTime());
      // 從微商廈頁面進入時必定是要重新加載數據的。
      if (sessionStorage.getItem('create') == 'true') {
        // 若是此時用戶刷新了頁面，那麼create的時候獲取數據就能夠了，因此不刷新的時候從微商廈進入再獲取數據
        if (this.$store.state.items.length !== 0) {
          if (sessionStorage.getItem('reload') == 'false') {
          // 可是仍是有一個問題，就是第一次進入的時候， 並無刷新，那麼還須要一個flag
          // 在created以後就會觸發activated 鉤子函數，這段時間發送的請求是不可能回來的，間隔只有20ms。
            this.getClassify(); 
            this.RESET_VALUE();
          } 
        }
      } else {
        // 什麼都不作
      }
    },