Tối ưu hóa hiển thị Pull Request khổng lồ trên ứng dụng GitHub Copilot

Trong quá trình phát triển phần mềm, việc thực hiện các thay đổi lớn hoặc tái cấu trúc (refactor) đôi khi không thể chia nhỏ thành các Pull Request (PR) riêng biệt. Điều này dẫn đến những PR khổng lồ, gây áp lực lớn lên giao diện người dùng khi cần hiển thị hàng nghìn file và hàng trăm bình luận. Để giải quyết vấn đề này, đội ngũ GitHub đã xây dựng lại giao diện PR cho ứng dụng GitHub Copilot với mục tiêu duy trì tốc độ phản hồi nhanh chóng.

Thách thức từ các bình luận (Comments)

Việc hiển thị danh sách code (diff) rất nhanh nhờ kỹ thuật virtualization (ảo hóa), nơi chỉ các dòng hiển thị trên màn hình mới được render. Tuy nhiên, các bình luận lại là một bài toán khó vì chiều cao của chúng không cố định: phụ thuộc vào nội dung Markdown, các khối code có thể mở rộng, hình ảnh đính kèm và các trình soạn thảo phản hồi. Điều này phá vỡ nguyên tắc “biết trước chiều cao” vốn giúp các diff code truyền thống hoạt động mượt mà.

Giải pháp: Phân tách hình học (Two Geometries)

GitHub đã chia cấu trúc tài liệu thành hai miền độc lập:

• Code geometry: Giữ nguyên tính chất xác định, không thay đổi khi bình luận thay đổi kích thước.
• Dynamic block geometry: Dành cho các khối có chiều cao không dự đoán trước được (bình luận, bản nháp). Các khối này được gán một khóa ổn định, neo vào dòng code cụ thể thay vì tọa độ pixel, giúp hệ thống không bị mất dấu khi nội dung thay đổi.

Cơ chế đo lường thông minh

Thay vì sử dụng ResizeObserver cho từng khối (gây lãng phí tài nguyên và tạo vòng lặp render), GitHub đã triển khai một cơ chế đo lường dựa trên trạng thái “nhàn rỗi” (idle) và cuộn trang:

• Off the hot path: Quá trình đo lường chỉ chạy khi việc cuộn trang đã dừng lại, tránh gây giật lag (jank).
• Scoped to the viewport: Chỉ đo lường các khối trong phạm vi gần khung hình hiển thị.
• Scroll anchoring: Khi chiều cao thay đổi, hệ thống thực hiện điều chỉnh dựa trên danh tính (identity) thay vì pixel, giúp người dùng không bị mất vị trí đang đọc khi nội dung phía trên thay đổi.

Tối ưu hóa đường ống dữ liệu (Data Pipeline)

Hiệu năng của giao diện còn phụ thuộc vào cách dữ liệu được truyền tải:

• Stream cấu trúc trước nội dung: Cây thư mục và metadata được hiển thị ngay lập tức trong khi nội dung chi tiết đang tải.
• Trì hoãn các tác vụ nặng: Syntax highlighting được thực hiện ngoài luồng chính (off-thread), giúp các dòng code xuất hiện nhanh chóng mà không chặn quá trình cuộn trang.
• Cơ chế cache thông minh: Lưu trữ các diff gần nhất để việc quay lại trang cũ diễn ra tức thì, đồng thời giải phóng bộ nhớ cho các phiên làm việc dài.

Bằng cách kết hợp các kỹ thuật đo lường chủ động và kiến trúc phân tách, GitHub đã biến trải nghiệm xem các PR khổng lồ trở nên mượt mà, ngay cả trên những thay đổi cực đoan nhất.

Nguồn tham khảo: GitHub Blog