为什么select控件多了，会明显影响响应速度

Question

为什么页面中select控件多了，会明显影响响应速度, 如何优化？

vue绑定json数据

data(){
    return {
        form:{
            //...,
            rows:[{ // 假设rows有100条数据，每行3个select
                sel1Val:'' // select选中值
                selList:[ // select下拉框
                {option_id:'1', option_name:'1'},
                {option_id:'2', option_name:'2'}]
            },
            {
                sel2Val:''
                selList:[
                {option_id:'2-1', option_name:'2-1'},
                {option_id:'2-2', option_name:'2-2'}]
            },
            //...
            ]
        }
    }
}

HTML

<table>
<el-form>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item, $index) in form.rows">
            <td>
                <el-select v-model="item.sel1val">
                    <el-option v-for="opt in item.selList" :value="opt.option_id" :lalbel="item.option_name"></el-option>
                </el-select>
            </td>
            <td>
                <el-select v-model="item.sel2val">
                    <el-option v-for="opt in item.selList" :value="opt.option_id" :lalbel="item.option_name"></el-option>
                </el-select>
            </td>
            <td>
                <el-select v-model="item.sel3val">
                    <el-option v-for="opt in item.selList" :value="opt.option_id" :lalbel="item.option_name"></el-option>
                </el-select>
            </td>
            <!--略-->
        </tr>
    </tbody>
</el-form>
</table>

Answer 1

不要在进入之前或者 数据绑定时同时获取所有数据

不然一进来光请求他肯定影响进程

先给每个select 设置默认值 或者 placeholder 给用户（假）信息 每次change 或者click 时候去获取数据

但具体看产品需求 实现对应功能

你可以看看每次进入加载多少js 以及多少其他文件

可能无用文件影响你的速度

Answer 2

每一个select控件在渲染的过程中都是一次for循环，所以多了就会影响性能

Answer 3

建议布局也不要用table,用flexbox,table布局渲染也会拖慢速度

Answer 4

// 假设rows有100条数据，每行3个select

首先这句话就很值得优化，为什么会有100行，实际业务当中必然是会做分页或者懒加载处理的，所以不会存在100行如此之多的数据。

再者，实际当中会遇到的应用场景是，每个select他们需要渲染的数组是从不同的数据字典当中获取的。那么就尽量一次请求获取多个select数据，切忌发送多次请求，从http的角度进行优化，暂时写这两个。。。开会去了

Answer 5

遇到同样的问题，感觉是数据驱动dom在大量渲染导致卡慢