vue表格大量input框渲染性能优化

背景

有一个表格，想要通过输入框编辑内容，但是在性能低下的电脑渲染1000+的输入框时该页面存在加载缓慢的问题

原因

不同的dom渲染消耗的内存是不一样的，input输入框消耗比较大，通过1000个输入框在本地性能CPU调节为4倍降速时，通过(performance.timing.domComplete - performance.timing.navigationStart)/1000计算得到的首屏加载速度为优化前是平均为17s，优化后是平均为10s.

思路

1、span比input输入框性能消耗低
2、通过span与input输入框样式保持一致，伪造input输入框
3、点击span时激活input输入框，并激活输入光标
4、将其封装成一个独立的组件进行复用

代码

伪输入框组件代码

<template>
  <div class="fake-content">
    <!-- 原生input -->
    <!-- <input v-if="inputStatus" ref="myInput" class="fake-input" :value="value" @input="$emit('input', $event.target.value)" @blur="handleInputBlur"> -->
    <!-- element ui的input -->
    <el-input v-if="inputStatus" ref="myInput" :value="value" @input="$emit('input', $event)" @blur="handleInputBlur" />
    <span v-else class="fake-input" @click="handleSwitchShowStatus">{{ value }}</span>
  </div>
</template>
 
<script>
export default {
  name: 'FakeInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      inputStatus: false
    }
  },
  methods: {
    handleInputBlur() {
      this.inputStatus = false
    },
    handleSwitchShowStatus() {
      this.inputStatus = true
      // dom更新完后再执行，否则input框还未存在。
      this.$nextTick(() => {
        this.$refs.myInput.focus()
      })
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .fake-content {
    height: inherit;
    // 使用el-input的样式
     .fake-input {
      display: inline-block;
      width: 100%;
      height: inherit;
      font-size: inherit;
      border-radius: 4px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      color: #606266;
      // outline: 0; // 使用原生input时需要加
      padding: 0 15px;
    }
  }
</style>

伪输入框组件应用

<FakeInput v-model="value"/>