[Open WebUI] StatusHistory 비교에 O(1) 길이 검사 추가로 직렬화 비용 절감

PR 링크: open-webui/open-webui#22103 상태: Merged | 변경: +2 / -1

들어가며

Svelte의 반응형 구문($:)에서 배열 비교를 위해 JSON.stringify()를 사용하는 패턴은 흔합니다. 하지만 이 비교가 스트리밍 중 매 프레임마다 호출되면, 직렬화 비용이 누적됩니다. 상태 히스토리(StatusHistory)는 대부분 append-only로 갱신되므로, 길이만 다르다면 직렬화 없이도 변경 여부를 알 수 있습니다.

핵심 코드 분석

길이 사전 검사 추가

Before:

$: if (JSON.stringify(statusHistory) !== JSON.stringify(history)) {
  history = statusHistory;
}

After:

$: if (statusHistory.length !== history.length
  || JSON.stringify(statusHistory) !== JSON.stringify(history)) {
  history = statusHistory;
}

JavaScript의 단축 평가(short-circuit evaluation) 덕분에, 길이가 다르면 JSON.stringify()는 아예 실행되지 않습니다. 스트리밍 중 상태가 추가될 때마다 길이가 변하므로, 대부분의 업데이트에서 O(1) 정수 비교만으로 변경을 감지합니다.

왜 이게 좋은가

1. O(n) 직렬화를 O(1) 검사로 대체: 배열에 새 항목이 추가되는 대부분의 경우, 길이 비교만으로 충분합니다.
2. 정확성 유지: 길이가 같더라도(예: 기존 항목이 수정된 경우) JSON.stringify() 비교로 폴백하므로, 모든 변경을 놓치지 않습니다.
3. 스트리밍 성능 개선: 스트리밍 응답의 매 프레임에서 호출되는 코드이므로, 이 작은 최적화가 전체 렌더링 루프에 누적 효과를 줍니다.
4. 패턴 적용 용이: 이 fast-path 패턴은 다른 반응형 배열 비교에도 동일하게 적용할 수 있습니다.

참고 자료

• JavaScript 단축 평가
• Open WebUI GitHub