修复:后台恢复时消息暴刷,只渲染最后50条并插入省略提示
This commit is contained in:
@@ -457,6 +457,9 @@ export function enqueueChatMessage(msg) {
|
|||||||
state.chatMessageFlushTimer = scheduleFlush(flushQueuedChatMessages);
|
state.chatMessageFlushTimer = scheduleFlush(flushQueuedChatMessages);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 后台恢复时公屏最大渲染条数,避免暴刷 */
|
||||||
|
const MAX_BURST_RENDER = 50;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 分批渲染待处理消息,给动画、输入和滚动留出主线程时间。
|
* 分批渲染待处理消息,给动画、输入和滚动留出主线程时间。
|
||||||
*/
|
*/
|
||||||
@@ -466,6 +469,23 @@ export function flushQueuedChatMessages() {
|
|||||||
|
|
||||||
state.chatMessageFlushTimer = null;
|
state.chatMessageFlushTimer = null;
|
||||||
|
|
||||||
|
// 大批量消息堆积(后台标签页恢复)时,丢弃早于 MAX_BURST_RENDER 的消息,
|
||||||
|
// 插入一条省略提示,避免用户一回来就看到满屏消息狂刷。
|
||||||
|
if (state.pendingChatMessages.length > MAX_BURST_RENDER + 20) {
|
||||||
|
const skipped = state.pendingChatMessages.length - MAX_BURST_RENDER;
|
||||||
|
state.pendingChatMessages.splice(0, skipped);
|
||||||
|
|
||||||
|
const container = state.container;
|
||||||
|
if (container) {
|
||||||
|
const notice = document.createElement("div");
|
||||||
|
notice.className = "msg-line msg-burst-notice";
|
||||||
|
notice.style.cssText =
|
||||||
|
"text-align:center;padding:6px 0;margin:4px 0;font-size:12px;color:#94a3b8;border-top:1px dashed #d1d5db;border-bottom:1px dashed #d1d5db;";
|
||||||
|
notice.textContent = `⏫ 省略了 ${skipped} 条未读消息`;
|
||||||
|
container.appendChild(notice);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const batch = state.pendingChatMessages.splice(0, CHAT_MESSAGE_FLUSH_BATCH_SIZE);
|
const batch = state.pendingChatMessages.splice(0, CHAT_MESSAGE_FLUSH_BATCH_SIZE);
|
||||||
const renderBatch = createChatMessageRenderBatch();
|
const renderBatch = createChatMessageRenderBatch();
|
||||||
batch.forEach((msg) => appendMessage(msg, renderBatch));
|
batch.forEach((msg) => appendMessage(msg, renderBatch));
|
||||||
|
|||||||
Reference in New Issue
Block a user