如何优化脚本，实现更流畅的字符循环（character cycling）效果？

1. 简化HTML结构 #

原HTML每个字符用独立h1标签，维护成本极高。改为单个h1容器，每个字符（含空格）用统一类名的span包裹，结构更简洁且语义化：

<header>
  <h1 class="title">
    <span class="title-char">W</span>
    <span class="title-char">e</span>
    <span class="title-char">l</span>
    <span class="title-char">c</span>
    <span class="title-char">o</span>
    <span class="title-char">m</span>
    <span class="title-char">e</span>
    <span class="title-char"> </span>
    <span class="title-char">T</span>
    <span class="title-char">o</span>
    <span class="title-char"> </span>
    <span class="title-char">M</span>
    <span class="title-char">y</span>
    <span class="title-char"> </span>
    <span class="title-char">W</span>
    <span class="title-char">e</span>
    <span class="title-char">b</span>
    <span class="title-char">s</span>
    <span class="title-char">i</span>
    <span class="title-char">t</span>
    <span class="title-char">e</span>
    <span class="title-char">!</span>
  </h1>
</header>

2. 精简CSS代码 #

调整布局逻辑，让标题容器横向排列字符，无需额外处理空格：

.flex_main {
  display: flex;
  flex-direction: column;
  color: #03fc18;
  background-color: #000000;
  font-size: 17px;
  font-family: Consolas;
  min-height: 74vh;
  margin: auto;
}

.flex_main .title {
  margin: 0 20px;
  display: flex;
  gap: 0; /* 确保字符间距一致 */
}

3. 优化JavaScript逻辑 #

主要优化点：减少DOM查询次数、消除硬编码、提升代码可维护性：

// 字符集直接使用字符串，无需转数组（字符串可直接通过索引访问）
const charSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890~`!@#$%^&*()-_=+[{]}|;:',<.>/?";
// 一次性获取所有字符元素，避免重复查询DOM
const charElements = document.querySelectorAll(".title-char");
// 最终目标文本（与HTML结构对应，包含空格）
const targetText = "Welcome To My Website!";
// 原duration数组保留，用于随机选择循环时长
const durationOptions = [1, 1.2, 1.7, 2, 2.1, 2.7, 2.9, 3, 3.5, 4];

// 生成指定范围的随机整数
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 单个字符的循环逻辑：直接接收元素，避免重复查询
function cycleCharacter(element, targetChar, durationMs) {
  const interval = setInterval(() => {
    // 随机选择字符集里的字符，用字符集长度动态计算，避免硬编码101
    const randomIndex = getRandomInt(0, charSet.length - 1);
    element.textContent = charSet[randomIndex];
  }, 100);

  setTimeout(() => {
    clearInterval(interval);
    element.textContent = targetChar;
  }, durationMs);
}

// 遍历所有字符元素，启动循环
charElements.forEach((element, index) => {
  const targetChar = targetText[index];
  const randomDuration = durationOptions[getRandomInt(0, durationOptions.length - 1)] * 1000;
  cycleCharacter(element, targetChar, randomDuration);
});

核心优化说明 #

• DOM操作优化：一次性获取所有字符元素，避免在定时器中重复执行querySelector，提升性能。
• 结构语义化：用单个h1包裹所有字符，符合HTML语义规范，同时简化样式控制。
• 消除硬编码：字符集长度、元素数量不再写死，后续修改字符集或标题文本无需调整核心逻辑。
• 代码可读性：函数命名更清晰，逻辑拆分更合理，便于后续维护和扩展。

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