流式渲染实战：如何高效实现ChatGPT式打字机效果

2次阅读

共计 3816 个字符，预计需要花费 10 分钟才能阅读完成。

在传统的实时数据渲染场景中，一次性接收完整数据再渲染的方式会带来明显的性能问题。例如，当处理大段文本或高频更新的数据流时，频繁的 DOM 操作会导致页面卡顿，甚至引发内存溢出。特别是在类似 ChatGPT 的对话场景中，用户期望看到逐字输出的打字机效果，这就对前端渲染性能提出了更高要求。

DOM 操作频繁：一次性渲染大量节点会导致浏览器重排重绘，影响页面响应速度
内存压力：大文本内容直接存储在内存中可能超出 V8 引擎的字符串长度限制
交互体验差：无法实现渐进式展示效果，用户需要等待全部数据加载完成

实现流式数据传输主要有三种主流方案，各有其适用场景：

Server-Sent Events (SSE)
优点：HTTP 协议原生支持，自动重连，轻量级
缺点：单向通信(服务端→客户端)，IE 完全不支持
延迟：中等(依赖 HTTP/1.1)
长轮询(Long Polling)
优点：兼容性最好(支持 IE9+)
缺点：高频请求浪费资源，实现复杂
延迟：较高(每次请求需要建立连接)
WebSocket
优点：全双工通信，最低延迟，适合高频交互
缺点：需要额外维护连接状态
延迟：最低(持久化连接)

对于需要双向通信的聊天场景，WebSocket 是最佳选择。下面是基准测试数据对比(Chrome 115)：

方案	平均延迟	内存占用	兼容性
SSE	120ms	较低	★★★☆☆
长轮询	300ms	较高	★★★★★
WebSocket	50ms	中等	★★★★☆

使用 React 的 useReducer 管理分块数据，避免 useState 的多次触发问题：

const [state, dispatch] = useReducer((prev, action) => {switch(action.type) {
    case 'APPEND':
      return {
        ...prev,
        content: prev.content + action.chunk,
        lastUpdated: Date.now()}
    case 'RESET':
      return initialState
    default:
      return prev
  }
}, {content: '', lastUpdated: 0})

基于 requestAnimationFrame 实现渲染控制，保证 60fps 的流畅度：

const renderChunk = useCallback(() => {if (!chunkQueue.current.length) return

  const frameStart = performance.now()

  while (chunkQueue.current.length && 
         performance.now() - frameStart < 4 /*ms*/) {const chunk = chunkQueue.current.shift()
    dispatch({type: 'APPEND', chunk})
  }

  requestIdRef.current = requestAnimationFrame(renderChunk)
}, [])

实现自动重连和缓冲机制的关键逻辑：

class SocketClient {private buffer: string[] = []
  private reconnectAttempts = 0

  connect() {this.socket = new WebSocket(ENDPOINT)

    this.socket.onmessage = (event) => {if (this.isConnected) {this.processMessage(event.data)
      } else {this.buffer.push(event.data)
      }
    }

    this.socket.onclose = () => {setTimeout(() => {
        this.reconnectAttempts++
        this.connect()}, Math.min(1000 * this.reconnectAttempts, 5000))
    }
  }
}

// websocket-client.ts
type Listener = (data: string) => void

class WSClient {
  private ws: WebSocket | null = null
  private listeners: Listener[] = []
  private url: string

  constructor(url: string) {
    this.url = url
    this.connect()}

  connect() {this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {console.log('WebSocket connected')
    }

    this.ws.onmessage = (event) => {this.listeners.forEach(fn => fn(event.data))
    }

    this.ws.onclose = () => {setTimeout(() => this.connect(), 1000)
    }
  }

  subscribe(listener: Listener) {this.listeners.push(listener)
    return () => {this.listeners = this.listeners.filter(l => l !== listener)
    }
  }
}

// Typewriter.tsx
import {useEffect, useRef, useReducer} from 'react'

export function Typewriter() {const [state, dispatch] = useReducer(reducer, {
    text: '',
    isTyping: false
  })

  const chunkQueue = useRef<string[]>([])
  const requestIdRef = useRef<number>()

  useEffect(() => {const ws = new WSClient('wss://api.example.com/stream')
    const unsubscribe = ws.subscribe((chunk) => {chunkQueue.current.push(chunk)
      if (!requestIdRef.current) {requestIdRef.current = requestAnimationFrame(renderChunk)
      }
    })

    return () => {unsubscribe()
      cancelAnimationFrame(requestIdRef.current!)
    }
  }, [])

  const renderChunk = () => {if (chunkQueue.current.length) {const chunk = chunkQueue.current.shift()!
      dispatch({type: 'APPEND', payload: chunk})
      requestIdRef.current = requestAnimationFrame(renderChunk)
    } else {requestIdRef.current = undefined}
  }

  return <div className="typewriter">{state.text}</div>
}

通过 React.memo 防止无关更新：

const Chunk = React.memo(({text}: {text: string}) => {return <span>{text}</span>
})

对于超长内容采用环形缓冲区策略：

const MAX_LENGTH = 10000
let buffer = ''

function appendText(newText: string) {
  buffer += newText

  if (buffer.length > MAX_LENGTH * 1.5) {buffer = buffer.slice(-MAX_LENGTH)
  }
}

跨浏览器兼容：
添加 WebSocket polyfill
备用使用 EventSource(SSE)

多字节字符处理：

// 确保 UTF- 8 字符不被截断
function safeSlice(str: string, maxBytes: number) {const encoder = new TextEncoder()
  const bytes = encoder.encode(str)
  return new TextDecoder().decode(bytes.slice(0, maxBytes))
}

输入防抖：

let lastRenderTime = 0

function scheduleRender() {const now = Date.now()
  if (now - lastRenderTime > 50) { // 20fps
    immediateRender()} else {requestAnimationFrame(immediateRender)
  }
}

在实现客户端流式渲染后，服务端同样面临压力控制问题：如何设计合理的速率限制策略？需要考虑：