这个问题我们用中文翻译一下:

执行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也可以解决这个问题 请指教!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐