前端的列表中遇到的滚动白屏问题

问题描述：

你是不是有遇到过列表页面滚动的时候页面白屏的问题？

---

原因分析：

如果你使用的是MVC模式，由服务端渲染页面，那应该不会存在该类问题，如果你是跑单页面应用，前后端分离，由浏览器端渲染，那快速滚动的时候你就会看到白屏现象，样式越复杂，白屏效果越明显，根本原因是因为浏览器在渲染树的时候，是

构建dom树=》构建render树=》布局render树=》渲染render树

1、你可以简单的这样理解，服务器解析html的时候，就像画画一样，首先他把标签转换为内容树中的dom节点，这步就类似于画画中的线稿，就是初稿；
2、然后初稿画完了，得上色吧？上色之前得准备好颜料吧？这时候就需要拿另一张纸，将需要的颜料准备好，这步就是构建render树，它需要把相关的css样式以正确的顺序显示在浏览器上；
3、这会儿，颜料也准备好了，那就开始将颜料按照你的线稿的着色区域开始进行涂抹，也就是上色。这步就是布局render树，它将你的css样式精确的落在dom树的对应坐标上；
4、最后，就是将两张画（线稿和色稿）重叠在一起，就是一幅有色彩的幅画了，这步就是绘制render树了。
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
所以，个人认为问题就出现在这一步上，因为你在列表中上下滚动内容的时候，浏览器是在不断的重绘和重排，这时候就导致了列表里的内容都要被重新绘制一遍（因为列表里的内容的位置已经变了），所以这不断重绘重排的时间过程，就是你看到的空白屏的过程。

---

解决方案：

解决方式的话有几种，限制滚动条的滚动速度，或者使用虚拟列表（只能轻微减缓），其他的方式还在找寻的过程中。