如何在div容器中展示WebSocket推送的最近10条更新？

核心思路很简单：严格控制页面渲染的消息总数量，既不全量覆盖历史有效消息，也不无限堆积DOM节点，两种可直接落地的方案：

方案1：内存消息队列+整体渲染（首推，稳定性最高） #

• 提前在WebSocket的初始化作用域定义两个常量/变量：
  • const MAX_SHOW_COUNT = 10：定义最多展示10条消息
  • let messageQueue = []：用来缓存消息内容，注意不要在消息接收回调里重复声明这个变量，否则每次都会重置缓存
• 每收到新的WebSocket推送消息时，按顺序执行：
  1. 把新消息内容push到messageQueue数组尾部
  2. 当messageQueue.length > MAX_SHOW_COUNT时，调用数组的shift()方法移除最开头的最旧消息，保证队列长度永远不超过10
  3. 把队列里的所有消息按你需要的样式拼接成完整的HTML字符串
  4. 直接用container.innerHTML = 拼接好的完整HTML给展示容器赋值
     对应解决你之前遇到的两个问题：
• 不会出现单条覆盖：每次渲染会把当前留存的全部有效历史消息拼入HTML，不是只渲染最新的一条
• 不会出现页面崩溃：队列长度被硬限制在10条以内，DOM节点数量恒定，不会随着推送量上涨出现内存溢出

方案2：DOM节点裁剪（轻量实现，适合简单场景） #

如果不想在JS里维护消息缓存，可以直接通过DOM操作控制展示数量：

• 每收到新消息，生成对应的消息DOM节点，直接追加到展示容器末尾
• 每次插入新节点后，立刻检查容器的子节点总数：如果超过10，就把容器的第一个子节点（也就是最早插入的最旧消息）直接移除
  这个方案的特点：不需要额外占用JS内存存储历史消息，适合消息结构简单、不需要对历史消息做筛选/排序的轻量场景

注意避坑 #

• 别再用container.innerHTML += result的写法：这种写法会触发浏览器对容器内所有DOM的重新解析，哪怕后续做节点清理，长期运行也容易残留无效DOM节点，拖慢页面性能
• 如果推送的消息包含用户输入的文本，拼接HTML前要做特殊字符转义，避免出现XSS注入风险

内容的提问来源于stack exchange，提问作者user4292309