定时随机替换文本导致段落间隙异常问题求助

我正在开发一个脚本，实现每隔数秒从选项列表中随机选择内容替换指定文本/短语。该功能可正常运行，但代码会导致段落间出现随机间隙，且间隙不一定出现在发生替换的段落。使用Firefox 108.0.1，恳请帮忙排查问题。

原代码 #

JavaScript

var r1 = ["option1", "option2", "option3"];
var r2 = ["option1", "option2", "option3"];
var r3 = ["option1", "option2", "option3"];

var msecs = 3500;

setInterval(function() {
  var r1_id = Math.floor(Math.random() * r1.length);
  document.getElementById('t1').innerHTML = r1[r1_id];
  var r2_id = Math.floor(Math.random() * r2.length);
  document.getElementById('t2').innerHTML = r2[r2_id];
  var r3_id = Math.floor(Math.random() * r3.length);
  document.getElementById('t3').innerHTML = r3[r3_id];
}, msecs);

CSS

.book {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: #FCF5E5;
  border: solid #966F33;
  border-width: 5px;
}

HTML

<div class="book">
  <p>This is sentence one, <span id="t1">this should change</span>.</p>
  <p>This is sentence two, <span id="t2">this should change</span>.</p>
  <p>This is sentence three, <span id="t3">this should change</span>.</p>
</div>

原因分析 #

Firefox中，用innerHTML修改<span>内容时会触发浏览器重排/重绘，加上默认<p>元素的margin、行高未明确设置，不同长度的替换文本会导致段落高度出现细微波动，累积后就会产生看似随机的间隙。另外，动态修改内联元素内容时，浏览器渲染引擎偶尔会出现布局计算偏差。

解决方案 #

1. 用textContent替代innerHTML #

如果仅替换纯文本，textContent比innerHTML更高效，且不会解析HTML，能避免不必要的渲染问题：

setInterval(function() {
  var r1_id = Math.floor(Math.random() * r1.length);
  document.getElementById('t1').textContent = r1[r1_id];
  var r2_id = Math.floor(Math.random() * r2.length);
  document.getElementById('t2').textContent = r2[r2_id];
  var r3_id = Math.floor(Math.random() * r3.length);
  document.getElementById('t3').textContent = r3[r3_id];
}, msecs);

2. 固定替换元素的宽度 #

给用于替换的<span>设置固定宽度，避免文本长度变化导致布局偏移：

#t1, #t2, #t3 {
  display: inline-block;
  width: 120px; /* 根据最长选项长度调整 */
  text-align: left;
}

3. 统一段落的margin和行高 #

给<p>元素设置明确的margin和line-height，消除浏览器默认样式的影响：

.book p {
  margin: 1em 0; /* 固定上下边距 */
  line-height: 1.5; /* 统一行高 */
}

完整修改后代码 #

JavaScript

var r1 = ["option1", "option2", "option3"];
var r2 = ["option1", "option2", "option3"];
var r3 = ["option1", "option2", "option3"];

var msecs = 3500;

setInterval(function() {
  var r1_id = Math.floor(Math.random() * r1.length);
  document.getElementById('t1').textContent = r1[r1_id];
  var r2_id = Math.floor(Math.random() * r2.length);
  document.getElementById('t2').textContent = r2[r2_id];
  var r3_id = Math.floor(Math.random() * r3.length);
  document.getElementById('t3').textContent = r3[r3_id];
}, msecs);

CSS

.book {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: #FCF5E5;
  border: solid #966F33;
  border-width: 5px;
}

.book p {
  margin: 1em 0;
  line-height: 1.5;
}

#t1, #t2, #t3 {
  display: inline-block;
  width: 120px;
  text-align: left;
}

HTML

<div class="book">
  <p>This is sentence one, <span id="t1">this should change</span>.</p>
  <p>This is sentence two, <span id="t2">this should change</span>.</p>
  <p>This is sentence three, <span id="t3">this should change</span>.</p>
</div>

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