打字机效果怎么实现才不卡？

网络 → 片段 → 队列（还没显示的字）→ 每帧取出 n 个 → 页面
n = 距上一帧的毫秒数 × 当前速度；当前速度 = 基础速度 + 积压字数 × 系数

export class Typewriter {
  constructor(onOutput) {
    this.onOutput = onOutput // 每帧最多调用一次，参数是这一帧新增的文字
    this.queue = []
    this.frame = 0
    this.last = 0
    this.budget = 0 // 可以输出的字数，保留小数部分
  }

  push(text) {
    this.queue.push(...Array.from(text)) // 按码点拆分，不会把 emoji 切成两半
    if (!this.frame) {
      this.last = performance.now()
      this.frame = requestAnimationFrame(this.tick)
    }
  }

  tick = (now) => {
    const elapsed = Math.max(0, now - this.last)
    this.last = now
    // 基础速度约每秒 40 字，再加上和积压量成正比的部分：积压越多越快
    const speed = 0.04 + this.queue.length / 300 // 单位：字/毫秒
    // 不足一个字的部分留到下一帧，帧率不同时每秒输出的字数也一样
    this.budget += elapsed * speed
    const count = Math.floor(this.budget)
    if (count > 0) {
      this.budget -= count
      this.onOutput(this.queue.splice(0, count).join(''))
    }
    this.frame = this.queue.length ? requestAnimationFrame(this.tick) : 0
  }

  // 生成结束、出错或用户停止时调用：剩下的立即输出
  flush() {
    cancelAnimationFrame(this.frame)
    this.frame = 0
    if (this.queue.length) this.onOutput(this.queue.splice(0).join(''))
  }
}

// #answer 设置了 white-space: pre-wrap，保留换行
const textNode = document.querySelector('#answer').appendChild(document.createTextNode(''))
const typewriter = new Typewriter((s) => {
  textNode.data += s
})

try {
  for await (const { data } of readSSE(res.body)) {
    if (data === '[DONE]') break
    typewriter.push(JSON.parse(data).text)
  }
} finally {
  typewriter.flush() // 正常结束、出错、用户停止，都要把剩下的输出
}