从品牌网站建设到网络营销策划,从策略到执行的一站式服务
创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!
宜川网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作,到程序开发,运营维护。成都创新互联从2013年创立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。这篇文章主要为大家展示了vue项目router切换太慢怎么办,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
问题定位:
随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志,发现destroyed->router切换耗时1.5s左右,这时候定位问题是vue的destroyed周期耗时。
destroyed周期耗时:
这时候就考虑destroyed为啥要那么久,这时候就很纳闷,第一反应肯定是页面组件太多,这是把组件都删了,还是很慢,然后页面就剩下一个表格和查询条件,然后就想是不是数据量太大导致destroyed耗时,然后就查页面接口,发现有个list接口有4000多条数据,然后去掉接口,页面切换立马流畅了;就想数据多为啥导致销毁耗时,然后就想到了这个list是下拉框,这4000多条数都渲染在页面上,销毁不耗时才怪呢。
selected下拉框数据多,导致销毁耗时
然后就想办法处理select数据多问题,第一时间想用服务端过滤,想到服务端性能跟不上,只能在前端过滤;然后就想办法在前端过滤,初始化不给值,筛选的时候才给筛选过后的值
remoteMethod(query) { if (query !== "") { this.selectLoading = true; setTimeout(() => { this.selectLoading = false; this.source.storeSelectList = this.source.storeList.filter(item => { return ( item.storeName && item.storeName.toLowerCase().indexOf(query.toLowerCase()) > -1 ); }); }, 200); } else { this.source.storeSelectList = this.search.brandId ? this.source.storeList : []; } }
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图