前端开发中聊天场景的体验优化

在最近的开发工作中，遇到了一个聊天场景的应用（Web 和小程序），类似于我们再熟悉不过的 QQ 和微信，一个正常的聊天界面是大致上是长这个样子的：

这种聊天窗口的消息流有两个明显的特点：一是最新的消息和滚动条初始位置需要在列表的最底部，二是下拉加载历史消息后要在当前消息列表的顶部进行衔接。

一般来说要实现这样的功能，对于前端开发来说都不是难事，只要两步就可以了：首先，在第一屏消息渲染完之后设置容器的 scrollTop 为一个极大值，这样就把最新消息和滚动条初始位置定位到了最底部；然后，当滚动到顶部时渲染第二屏数据，接着设置容器的 scrollTop 为衔接的位置（也就是第二屏的总高度），这样就实现了前后两屏消息的衔接。这样的 demo 只需要随手撸二三十行代码就实现了：

一开始渲