Chat DIC, LLM 서비스 프런트엔드 성능 개선 비법 공개!
by DD
8개월 전
조회수 11
SSE 방식을 도입하여 실시간 스트리밍을 구현하고, WebSocket의 복잡성을 해결함
Buffer 적용으로 탭 비활성화 시 렌더링 지연 문제를 해결하고 사용자 경험을 개선함
Windowing 기법을 통해 DOM 노드 수를 일정하게 유지하여 대화 출력 성능을 향상시킴
SSE를 활용한 실시간 스트리밍 구현
LLM 응답 스트리밍을 위해 SSE(Server-Sent Events)를 선택하여 WebSocket의 복잡성을 줄였다. 구체적으로, HTTP/2를 통해 서버에서 클라이언트로의 단방향 통신을 구현했다. 따라서 브라우저 호환성을 확보하면서 구현 난이도를 낮추었다.
Buffer 적용으로 렌더링 지연 해결
탭 비활성화 시 발생하는 렌더링 지연 문제를 해결하기 위해 Buffer를 도입했다. 탭이 비활성화되면 스트리밍 데이터를 Buffer에 저장하고, 다시 활성화될 때 Buffer의 내용을 출력한다. 결과적으로, 사용자 경험을 향상시키고 자원 사용량을 최적화했다.
Windowing 기법을 통한 DOM 최적화
대화 내용 증가에 따른 DOM 노드 증가 문제를 해결하기 위해 Windowing 기법을 적용했다. react-window 라이브러리를 사용하여 화면에 보이는 요소만 렌더링하고, 스크롤 시 동적으로 렌더링 범위를 조정한다. 따라서 브라우저 성능을 유지하면서 대화 출력 속도를 개선했다.
