Rapid Diffs

Rapid Diffs에 대해 설명합니다.

Rapid Diffs는 GitLab을 위한 고성능 diff 렌더링 시스템입니다. Rapid Diffs는 서버에서 렌더링한 HTML, Web Components, HTTP 스트리밍을 사용해 머지 리퀘스트, 커밋, 비교 페이지에서 코드 변경 사항을 표시합니다. 이 접근 방식을 택한 이유는 기본적으로 지연 을 참고합니다. [!NOTE] 머지 리퀘스트 페이지에는 rapid_diffs_on_mr_show 기능 플래그가 필요합니다. 서버 및 클라이언트 아키텍처 # Rapid Diffs의 주된 초점은 체감 성능, 즉 요청부터 화면에 첫 diff가 렌더링되기까지의 시간을 최소화하는 것입니다. diff 파일은 항상 ViewComponent 를 사용해 서버에서 렌더링됩니다. 클라이언트는 diff HTML을 직접 구성하지 않습니다. 클라이언트는 서버에서 렌더링한 HTML을 페이지에 배치하고 인터랙션만 추가합니다. 이는 모든 시나리오에 적용됩니다. 초기 페이지 로드 시 서버는 첫 배치의 diff 파일을 HTML 응답에 인라인으로 렌더링합니다. 사용자는 콘텐츠를 즉시 확인합니다. 스트리밍 중에는 나머지 diff 파일이 서버에서 스트리밍 HTML 응답으로 도착합니다. 클라이언트는 그 HTML을 그대로 라이브 DOM에 렌더링합니다. 사용자가 inline/parallel 또는 공백 처리 같은 뷰 설정을 변경하거나 통합이 리로드를 트리거해 다시 로드할 때, 클라이언트는 diff 목록 전체를 서버에서 스트리밍된 새 서버 렌더링 HTML로 교체합니다. 단일 파일은 그 HTML 엔드포인트를 가져와 해당 <diff-file> 요소를 교체하는 방식으로 개별 리로드도 가능합니다. JavaScript는 경량 어댑터 시스템을 통해서만 인터랙션을 추가합니다. 어댑터는 파일을 토글하고, 토론을 관리하며, 메뉴를 제어합니다. Mermaid 다이어그램 (8줄) 소스 코드 보기 graph TD A[Rails Controller] --> B[Presenter] B --> C[AppComponent] C --> D[DiffFileComponent] D --> E[ViewerComponent] E --> F["HTML <diff-file>"] F --> G["<diff-file-mounted> fires"] G --> H[Adapters add interactivity] Diff 용어 # Git은 파일 변경 사항을 diff로 나타냅니다. diff 파일은 하나의 파일에 대한 변경 사항을 나타냅니다. diff 파일은 파일 헤더와 하나 이상의 hunk로 구성됩니다. 각 hunk는 변경이 일어난 위치를 알려 주는 @@ 줄로 표시된 hunk 헤더로 시작합니다. hunk 헤더 뒤에는 hunk 줄이 옵니다. 실제로 추가된 줄, 제거된 줄, 변경되지 않은 컨텍스트 줄입니다. 다음 예시는 원시 git diff 가 이러한 부분에 어떻게 대응되는지 보여 줍니다. ┌─ File header │ │ diff --git a/