虚拟化列表

虚拟列表使用的场景

虚拟列表是对长列表对一种优化手段，对于一些业务场景，要展示对列表很长，同时不能使用分页对方式，如果一次性把数据全部渲染到页面，会造成浏览器卡死到现象，因为dom渲染时间变长，js和浏览器渲染共用一个线程，用户操作不能够及时响应，造成浏览器假死现象。

实现思路

1. 滚动容器元素，固定到高度 （scroll-wrap）
2. 滚动元素， 根据总数据量及其子元素到高度 计算滚动元素总高度(ul)
3. 可是区域，就是要渲染的滚动元素的子元素(li)，根据滚动容器高度，计算要展示的子元素条数， 设置滚动元素中 子元素的 startIndex endIndex
   在滚动的时候，获取滚动容器的 scrollTop, 计算已经隐藏的子元素个数，并设置滚动元素的padding-top, 监听元素的滚动事件，修改startIndex endIndex, 对总数据 进行截取 , 如下：

let count = 1000;
let startIndex = 0;
let endIndex = 11;
let arr = [];
for(let i = 0; i < count; i++) {
  arr.push('<li>' + i + '</li>');
}
let ul = document.getElementById('ul');
ul.style.height = 1000 * 50 + 'px';
let visblearr = arr.slice(startIndex, endIndex);
ul.innerHTML = visblearr.join(' ');

function render(wrap) {
    const scrollTop = wrap.scrollTop
    ul.innerHTML = '';
    let topIndex = Math.floor(scrollTop / 50);
    ul.style.paddingTop = topIndex * 50 + 'px';
    startIndex = topIndex;
    endIndex = startIndex + 11;
    let visblearr = arr.slice(startIndex, endIndex);
    ul.innerHTML = visblearr.join(' ');
}

document.getElementsByClassName('scroll-wrap')[0].addEventListener('scroll', function (e) {
  render(this)
})

<style>
    .scroll-wrap {
      height: 500px;
      overflow: auto;
      border: 1px solid #000;
    }
    ul {
      margin: 0;
      box-sizing: border-box;
    }
    li {
        height: 50px;
      }
  </style>

<div class='scroll-wrap'>
    <ul id='ul'></ul>
  </div>

以上就是一个虚拟列表的简单实现。