Rapid Diffs

Rapid Diffs에 대해 설명합니다.

Rapid Diffs는 GitLab을 위한 고성능 diff 렌더링 시스템입니다. Rapid Diffs는 서버 렌더링 HTML, Web Components, HTTP 스트리밍을 사용하여 머지 리퀘스트, 커밋, 비교 페이지에서 코드 변경 사항을 표시합니다. 이 접근 방식에 대한 이유는 기본적으로 지연 을 참조하세요. [!NOTE] 머지 리퀘스트 페이지는 rapid_diffs_on_mr_show 피처 플래그와 URL의 ?rapid_diffs=true 가 필요합니다. 서버 및 클라이언트 아키텍처 # Rapid Diffs의 주요 초점은 인지 성능, 즉 요청부터 화면의 첫 번째 렌더링된 diff까지의 시간을 최소화하는 것입니다. Diff 파일은 항상 ViewComponent 를 사용하여 서버에서 렌더링됩니다. 클라이언트는 diff HTML을 구성하지 않습니다. 클라이언트는 서버 렌더링 HTML을 페이지에 배치하고 인터랙티비티를 추가하기만 합니다. 이것은 모든 시나리오에 적용됩니다: 초기 페이지 로드 시, 서버는 HTML 응답에 첫 번째 배치의 diff 파일을 인라인으로 렌더링합니다. 사용자는 즉시 콘텐츠를 봅니다. 스트리밍 중, 나머지 diff 파일은 서버에서 스트리밍 HTML 응답으로 도착합니다. 클라이언트는 HTML을 있는 그대로 라이브 DOM에 렌더링합니다. 리로드 시, 사용자가 인라인/병렬 또는 공백과 같은 뷰 설정을 변경하거나 통합이 리로드를 트리거할 때, 클라이언트는 전체 diffs 목록을 서버에서 스트리밍된 신선한 서버 렌더링 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 │ │