vue开发中出现警告Forced reflow while executing JavaScript took
这个问题我们用中文翻译一下:执行JavaScript时强制回流也就是哪里的操作 导致页面回流从而卡顿什么是强制回流??点我了解强制回流我遇到的情况我写了一个试题列表,列表里面有300题,每个题目有4个选项。起初我觉得有点卡,但是觉得数据量才这么点就卡很不合理就先放着没管。直到我数据量到了500以上,那页面我滴天,真的迟钝!!开始排查首先判断是否哪里频繁使用v-if等导致的,我一块块注释重复运行发现
·
这个问题我们用中文翻译一下:
执行JavaScript时强制回流
也就是哪里的操作 导致页面回流从而卡顿
什么是强制回流??
我遇到的情况
我写了一个试题列表,列表里面有300题,每个题目有4个选项。起初我觉得有点卡,但是觉得数据量才这么点就卡很不合理就先放着没管。
直到我数据量到了500以上,那页面我滴天,真的迟钝!!
开始排查
首先判断是否哪里频繁使用v-if等导致的,我一块块注释重复运行发现并不是他的问题。
其次判断是否是数据渲染问题,因为我抽出了好几个组件以及v-for去循环渲染数据。在我一重重注释发现,只要把列表数据删了就不会卡顿了,但这不行啊。不能手有病我们就把手砍了对吧,我们需要找到到底哪里出现的问题。
最后在我刨根问底的过程中发现了我v-for了el-radio,看着是一点问题也没有,都是常规用法。但是一注释掉, 竟然不卡了??!!!
找到凶手
注释掉el-radio后不卡,这让我十分愤怒和发狂哈。因为我一直以为是我哪里渲染的问题,浪费我几个小时的时间。
寻找平替
不如简简单单input哈
上代码: 注释掉的是曾经的代码
<ul class="topic-card-radio-wrapper">
<!-- <el-radio-group v-model="radio"> -->
<li v-for="item in topicData.answerVOList" :key="item.id" class="topic-card-item">
<!-- <el-radio :label="item.id" :disabled="topicSettings && topicSettings.isDisabled">
{{ item.sort }}
<span>.</span>
{{ item.optionTitle }}
</el-radio> -->
<input @change="checkedAnswer(item.id);" type="radio" :id="`exam-answer-${item.id}`"
:name="topicData.questionId" :value="item.id" v-model="radio"
:disabled="topicSettings && topicSettings.isDisabled" />
<label :for="`exam-answer-${item.id}`"> <span>
{{ item.sort }}
<span>.</span>
{{ item.optionTitle }}
</span>
</label>
</li>
<!-- </el-radio-group> -->
</ul>
完结, 如果使用el-raidio也可以解决这个问题 请指教!!
更多推荐
已为社区贡献4条内容
所有评论(0)