1. 什么是虚拟列表
长列表优化一般采用虚拟列表。在页面上创建一个容器作为可视区，在这个可视区内展示长列表中的一部分，也就是在可视区渲染列表。
虚拟列表简单模拟
<body>
<div id="container" style="height:150px; overflow:auto">
<ul id="list"></ul>
<div id="content-placeholder"></div>
</div>
</body>
<script>
const ITEM_HEIGHT = 30;
const ITEM_COUNT = 100;
window.onload = function(){
const container = document.querySelector("#container")
const containerHeight = container.clientHeight
const list = document.querySelector('#list')
list.style.height = containerHeight + 'px'
const visibleCount = Math.ceil(containerHeight/ITEM_HEIGHT)
const placeholder = document.querySelector('#content-placeholder')
list.appendChild(renderNodes(0,visibleCount))
placeholder.style.height = (ITEM_COUNT * ITEM_HEIGHT-containerHeight) + 'px'
container.addEventListener('scroll',function(){
list.style.webkitTransform = `translateY(${container.scrollTop}px)`
list.innerHTML = ""
const firstIndex = Math.floor(container.scrollTop/ITEM_HEIGHT)
list.appendChild(renderNodes(firstIndex, firstIndex + visibleCount))
})
};
function renderNodes(from, to){
const fragment = document.createDocumentFragment();
for(let i = from; i<to; i++){
const el = document.createElement('li')
el.style.height = ITEM_HEIGHT + 'px'
el.innerText = i+1
fragment.appendChild(el)
}
return fragment
}
</script>
