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 {
        // 什么都不做
      }
    },