如果要在前端呈现大量的数据,一般的策略就是分页。前端要呈现百万数据,这个需求是很少见的,但是展示千条稍微复杂点的数据,这种需求还是比较常见,只要内存够,javascript 肯定是吃得消的,计算几千上万条数据,js 效率根本不在话下,但是 DOM 的渲染浏览器扛不住,CPU 稍微搓点的电脑必然会卡爆。
本文的策略是,显示三屏数据,其他的移除 DOM。
一、 策略
下面是我简单勾画的一个草图,我们把一串数据放到一个容器当中,这串数据的高度(Data List)肯定是比 Container 的高度要高很多的,如果我们一次性把数据都显示出来,浏览器需要花费大量的时间来计算每个 data 的位置,并且依次渲染出来,整个过程中 JS 并没有花费太多的时间,开销主要是 DOM 渲染。
/==============> Data List | .... | / +--------------+/ +=======|=====data=====|========+ | +--------------+ | || data || | +--------------+ |\ || data || \ | +--------------+ | \======> Container +=======|=====data=====|========+ +--------------+ | .... | Created By Barret Lee
while(child = Container.children[i++]){ var index = child.getAttribute("data-index"); // 这里记得不要把最后一个节点给删除掉了 if((index > end || index < start) && index != len - 1){ Container.removeChild(child); } }
当 DOM 加载完毕之后,触发一次 Container.onscroll(),然后整个程序就 OK 了。