前端流畅展示大量数据，网上已经有不少前辈讲解这个。小弟有幸也能摸到这个需求，并且产生一些思考。
前端渲染大量节点，只要内存够用，JavaScript肯定是吃得消的，那么主要优化的点就是尽可能的减少DOM渲染。
首先概括读完本文之后，能实现的效果，拿个消息界面举例子：
流畅展示大量（百万）节点，滚动条滚动亦流畅。
上图：
JavaScript文件大小
这里面是30万节点，生成js对象差不多50兆吧。我是一次性加载的，初始化会比较慢，实际使用可以分割小文件加载，异步处理等等。
看效果：
效果图.gif
以下是原理以及实现步骤（附：后面点会有相关插件发布，坑儿我先占了）
前置条件：
需要预先计算节点的准确高度。
- 复杂节点：
文字可以通过创建一个与显示节点相同规格的节点来计算，图片可以外面套一个div，设置一个固定的宽高，图片本身等比缩放(max-width: 100%; max-height:100%;)，video，audio同理。 - 简单节点：
比如表格，已经预设了每个节点的高度，就更好办了。否则可以同复杂节点一样，计算一下。
实现原理：（假定父容器为container）
1、将所有节点高度总计，设置给一个div（holder）用它来占位，展示滚动条。
2、再创建一个div（stage）作为显示容器，相对于父容器container定位(left: 0; top: 0，width: 100%;)。
3、根据滚动条位置，遍历节点数组（中每个节点的高度）计算出第一个元素（注意，这个元素可能是没有完全滚出屏幕的，需要特别处理）。
4、stage中节点的展示规则为：从第一个元素开始，展示满一屏（即保证stage中元素的总高度刚刚好>=父容器的高度）。
5、stage的top等于stage中第一个元素前所有元素height的总和 - 父容器的scrollTop。
上个动图：
原理.gif
等空了写具体实现
