如何更高效地使用jQuery向div加载聊天系统的新增消息内容

方案1：增量拉取轮询（改造成本最低，兼容现有架构） #

完全可以实现仅拉取新增消息追加到容器，该方案无需大幅调整现有逻辑，就能解决全量替换的性能问题：

• 给每条消息添加唯一自增ID字段，前端渲染时将ID存在消息DOM的data-id属性中
• 前端每次请求时携带当前已加载的最新消息ID，后端仅返回该ID之后的新增消息列表，无需返回全量数据
• 前端拿到新增消息后直接追加到#conversation_container末尾，不会改动原有DOM内容

修改后前端代码示例 #

// 存储当前已加载的最新消息ID
let lastMessageId = 0;

$(function() {
  // 初始化时从已有DOM中获取最新消息的ID
  const lastMsg = $('#conversation_container .message').last();
  if (lastMsg.length) {
    lastMessageId = lastMsg.data('id');
  }
  setInterval(refreshMessages, 1000);
})

function refreshMessages() {
  console.log("Refreshing messages");
  const conversationId = $('#conversationID').val();
  // 调用增量拉取接口，传入会话ID和最新消息ID
  $.get('/your/ruby/interface/path', { 
    conversation_id: conversationId,
    last_id: lastMessageId 
  }, function(newMessages) {
    if (!newMessages || newMessages.length === 0) return;
    // 遍历新增消息拼接后追加到容器
    newMessages.forEach(msg => {
      const msgDom = `<div class="message" data-id="${msg.id}">${msg.content}</div>`;
      $('#conversation_container').append(msgDom);
      // 更新最新消息ID
      lastMessageId = msg.id;
    })
    // 可选：新消息到达后自动滚动到底部
    $('#conversation_container').scrollTop($('#conversation_container')[0].scrollHeight);
  })
}

Ruby后端适配逻辑 #

新增一个接口接收conversation_id和last_id两个参数，查询对应会话中ID大于last_id的所有消息，以JSON格式返回即可，改动量极小。

该方案不仅能大幅降低请求体积和DOM操作开销，还能避免全量替换导致的页面闪烁、滚动位置重置、交互元素状态丢失等体验问题。

方案2：替换轮询为推送机制（彻底消除轮询开销，实时性更高） #

如果可以调整后端架构，完全可以去掉每秒轮询的逻辑，采用服务端主动推送的方案，Ruby栈推荐优先使用Rails原生的Action Cable实现：

• Action Cable是Rails内置的WebSocket封装，不需要额外引入第三方服务，可以快速实现双向通信
• 前端页面加载时订阅对应会话的频道，后端在有新消息提交时，直接将新消息广播到对应频道
• 所有订阅了该频道的在线用户会实时收到新消息，直接追加到容器即可，不需要定时请求服务端

该方案的性能远优于轮询，只有当有新消息产生时才会有数据传输，服务端和客户端的开销都会大幅降低，消息实时性也更高。如果不需要双向通信，也可以采用SSE（服务端发送事件）实现单向推送，实现逻辑更简单。

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