• 项目中所做的优化


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

      

  • 相关阅读:
    cmd常用命令大全
    网卡物理地址
    想看密码的请心平气和听我说
    作为一个程序员仪表
    960,950栅格化方法
    为什么要拿宽960做栅格化呢
    960栅格化优势
    虎牌 查询 自选号
    视频
    在线学习视频地址
  • 原文地址:https://www.cnblogs.com/zhuzhenwei918/p/6943152.html
Copyright © 2020-2023  润新知