慎用watch监听 |
您所在的位置：网站首页 › vue页面渲染慢 › 慎用watch监听 |
慎用watch监听
|
这是我参与更文挑战的第9天，活动详情查看： 更文挑战 开心，T恤到手~ 策之不以其道，食之不能尽其材，鸣之而不能通其意，执策而临之，曰：“天下无马！”呜呼！其真无马邪？其真不知马也！ 运营人员反馈某商品列表页面，每页1000条时，页面卡顿严重，已经影响使用，经实际测试，1000个条记录时，页面加载长达2分钟+，并且会出现卡死情况。遂开始优化之旅~~ 页面元素页面主体部分截图如下，每个元素包括一张主图，一些基本的信息字段。运营反馈当设置分页数量为1000时，会出现卡死，经过实际测试，可以重现。 主体前端代码分为两个部分，一个是包裹这些元素的父元素，一个是元素组件： 复制代码子组件ProductCard的关键代码如下： export default { name: 'ProductCard', props: { value: { type: Object, default() { return {} } }, }, data() { return { product: { choosed: false } } }, watch: { // 关键点3： 也是最重要的一点，watch监听不当，导致性能与卡顿 product: { deep: true, handler: function(newValue, oldValue) { // 向上层组件发送改变后的数据 this.$emit('input', this.product) } }, value: { deep: true, handler: function() { this.product = this.value } } }, created() { this.product = this.value }, methods: { changeChoosed() { // 改变选中状态 this.product.choosed = !this.product.choosed } } } .productcard { .productcard-checkbox { visibility: hidden; } .productcard-delete { visibility: hidden; } } .productcard:hover { .productcard-checkbox { visibility: visible; } .productcard-delete { visibility: visible; } } 复制代码 后端接口后端根据前端选择的条件，执行查询SQL，返回数据，使用的数据库连接池Druid+ActiveRecord模式。（对这一点感兴趣的可以检索jfinal相关） public Page getData() { ...... Page result = Db.paginate(pageNum, numPerPage, select, exceptSelect); for(Record r : result.getList()) { display(r); } return result; } 复制代码 分析步骤因为后端的性能更好分析一些，本人也更熟悉后端，所以先从后端入手： 后端经过测试，接口返回1000条数据的时间大约是17秒。 这个时间相当长，有优化空间 前台卡顿时间2分钟不符合，不是前端卡死的问题关键 前端使用Chrome-Performance监听加载1000条数据的性能情况，我们得到如下几张图： 从而确定了卡顿问题主要在前端，而且从renderList我们猜测，卡顿主要在于ProductCard这个组件的渲染上。 猜测定位到了ProductCard组件后，我们首先根据Network查看到图片的加载时间较长，猜测可能是图片过多导致加载过长。 第二个，我们注意到选中与不选中，我们在CSS中是通过变换组件的visibility属性来实现的。是否是visibility切换会导致组件渲染卡顿呢？我们检索资料发现visibility:hidden的性能实际比display:none要好。 第三个（终于找到你！），我们在组件中使用了watch，同时监听组件内部元素product与props中的value，当product变动时，会通过this.$emit('input', this.product)传递给外部的value，而value变动，又会触发this.product = this.value，进而又导致product变动，形成近乎死循环。造成严重性能问题。 我们得到以下结论： 图片过多导致加载过长 使用visibility 慎用watch 优化 后端我们使用parallelStream优化后端性能，优化后代码如下。接口响应时间从17秒左右下降到5秒。 public Page getData() { ...... Page result = Db.paginate(pageNum, numPerPage, select, exceptSelect); result.getList().parallelStream().forEach(r -> { display(r); }); return result; } 复制代码 前端针对分析中的三点，我们分别使用图片懒加载和修复watch后，1000条数据页面耗时大约为10秒，且不在出现卡死现象。 优化后的watch如下： ....... watch: { value: { deep: true, handler: function() { this.product = this.value } } }, created() { this.product = this.value }, methods: { changeChoosed() { this.product.choosed = !this.product.choosed // 向上层发送数据 this.$emit('input', this.product) } ...... } 复制代码前端没有什么优化经验，欢迎指正！ 若不吝可点个赞！ |
【本文地址】
今日新闻 |
推荐新闻 |