select列表性能优化

1.虚拟列表实现方式分两种：

• 利用CSS的translate3d(0,${this.startOffset}px,0)` 属性，来实现一个绝对布局的容器，在父scroll中不断的偏移，且总是显示在可视范围中心位置，来达到列表的无限循环效果。而且这个绝对容器中加载的元素是可数的。
• 监听元素是否进入、离开设定范围，来动态改变listData的内容（Dom的增删），达到元素重用的效果，但是不能显示滚动条。因为内容高度总是固定的。

第一种

注意点：

• 只有当translate3d(0,${this.startOffset}px,0)`发生变化的时候才会，重新渲染列表。
• 动态计算元素高度：用一个数组保存所有元素的位置、高度。用这个数组来确保每次的偏移量是正确的。
• 利用Image 构造函数的onload来计算图片的尺寸。
• 拿到图片尺寸以后，再去更新 所有元素的位置信息。（可以初始化要加载元素的高度）；

第二种

注意点：

• 笨方法使用scroll的移量事件来判断那个元素，进入、离开了设定范围。
• 主要还是使用新的API Intersection Observer 来监听当前元素是否离开了设定范围。
• 没有滚动条