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