一、问题分析。
聊天消息气泡重叠 BUG 分析（5W1H·测试版） 一、问题现象（What）
- 对方连续快速发送多条消息（如 1→2→3→4→...→10）
- 在对方发送到第4条消息刚出现时，立即点击进入该聊天窗口
- 进入后出现：消息3气泡与消息4气泡发生重叠
- 文字重叠、UI错乱，滑动一下页面或等待几秒后可能恢复
- 仅在快速进聊天、消息正在陆续加载时出现
二、问题出现时间（When）
- 对方连续、高频、批量发送消息的过程中
- 消息还没完全接收/渲染完成时
- 刚收到新消息弹窗，立刻点进聊天的瞬间
4 .消息列表异步加载、逐条渲染阶段
三、问题出在哪里（Where）
- 前端聊天页面 消息列表渲染模块
- 聊天气泡布局、高度计算、DOM渲染逻辑
- 消息异步逐条插入时的高度重算不及时
- iOS/Android/PC端聊天界面均可能出现
四、问题为什么出现 & 怎么出现（Why & How）
1... 消息是异步逐条来的，不是一次性加载
-
第3条消息刚渲染完，第4条马上插入
-
前端来不及重新计算气泡高度、间距、位置4. 你又在这个极短时间内强制进入页面
-
布局没更新完成 → 气泡位置重叠
-
本质：渲染速度跟不上消息推送速度 + 进入页面时机极端
五、测试如何推进开发解决（推进方案）
-
给开发明确问题点：- 消息批量插入时重绘/重排不及时- 进入聊天页时消息列表未做防抖/队列渲染
-
要求开发优化：- 消息渲染加队列控制，不要同时插入多条- 进入聊天后延迟一点点再加载最新消息- 气泡高度、间距增加强制重算逻辑
-
缺陷单定级：- 属于 UI显示BUG，一般/Major级别- 不影响功能，但体验差、视觉异常
六、测试如何验收（How 验收）
- 让另一账号连续快速发10条消息
- 发到第4条时立刻点进聊天3. 观察消息3、消息4气泡：- 正常排列、不重叠、不挤压
- 反复快速进、退出聊天，多次验证
- 切换弱网/正常网络，均不出现重叠
- 结论：不再重叠 → BUG修复通过