如何实现xterm.js原子渲染 避免clear操作触发重复渲染

当前写法触发两次渲染的核心原因：term.clear()会单独向渲染队列提交重绘任务，和后续写入新内容的重绘任务没有被合并到同一帧执行，同时clear操作会默认触发scroll事件回调。
以下是两种可直接落地的解决方法：

方案1：合并清屏序列与内容为单次写入（推荐，侵入性最低） #

term.clear()的本质是向终端写入ANSI清屏控制序列，你可以把清屏序列和新缓冲区内容拼接后，通过一次term.write调用批量传入，xterm会自动把同一次write内的所有操作合并到同一个渲染帧执行，全程仅触发一次重绘，也不会产生多余的scroll事件：

// \x1b[2J = 清屏序列，\x1b[0;0H = 光标移动到终端左上角，效果和term.clear()完全一致
const clearCommand = '\x1b[2J\x1b[0;0H';
const newContent = newBuffer.join('\r\n');
term.write(clearCommand + newContent, () => {
  term.scrollToBottom();
});

方案2：暂停渲染后操作缓冲区（适合大体积缓冲区替换，性能最优） #

如果新缓冲区内容体量较大，可以先暂停终端的渲染调度，完成所有清空、写入、滚动操作后再恢复渲染，整个操作过程不会触发任何中间重绘：

// 暂停终端渲染调度
term.pause();

// 执行所有缓冲区操作，此阶段不会触发重绘和scroll事件
term.clear();
newBuffer.forEach(line => term.writeln(line));
term.scrollToBottom();

// 恢复渲染，仅触发一次全局重绘
term.resume();

补充说明 #

如果你是手动注册的scroll事件监听，也可以在执行缓冲区替换前临时解绑scroll事件回调，所有操作完成后再重新绑定，彻底避免操作过程中scroll逻辑被误触发。

内容的提问来源于stack exchange，提问作者兰天游