Trong các ứng dụng Front-end hiển thị danh sách dài (Long lists), việc render toàn bộ mảng dữ liệu hàng nghìn phần tử vào DOM gây quá tải trình duyệt. Giải pháp kiến trúc mảng nào được áp dụng để giải quyết triệt để vấn đề này?

Question

Accepted Answer

Phân tích bản chất
Trình duyệt gặp khó khăn khi phải quản lý và render hàng nghìn node DOM cùng lúc vì chi phí vẽ lại (Reflow và Repaint) rất cao. Việc giữ toàn bộ mảng dữ liệu trong DOM làm bộ nhớ tăng cao và giảm khung hình mỗi giây (FPS).
Giải pháp tối ưu
Sử dụng kỹ thuật ảo hóa mảng (Array Virtualization hay Windowing). Thay vì render toàn bộ mảng, chúng ta chỉ tính toán và render một mảng con (Sub-array) gồm các phần tử hiển thị trong khung nhìn hiện tại (Viewport) dựa trên vị trí cuộn chuột (Scroll position).
Ví dụ code minh họa
// Khái niệm cơ bản tính toán cửa sổ hiển thị
const totalItems = 10000;
const itemHeight = 50;
const viewportHeight = 500;

// Xác định chỉ số bắt đầu và kết thúc dựa trên scrollTop
function getVisibleRange(scrollTop) {
  const startIndex = Math.floor(scrollTop / itemHeight);
  const visibleCount = Math.ceil(viewportHeight / itemHeight);
  const endIndex = Math.min(startIndex + visibleCount + 1, totalItems);
  return { startIndex, endIndex };
}
Lưu ý kinh nghiệm thực chiến
Trong thực tế dự án Enterprise, Junior nên sử dụng các thư viện đã được tối ưu sẵn như react-window hoặc tanstack virtual thay vì tự viết lại logic ảo hóa mảng nhằm tránh các lỗi tính toán biên (Edge cases).

Trong các ứng dụng Front-end hiển thị danh sách dài (Long lists), việc render toàn bộ mảng dữ liệu hàng nghìn phần tử vào DOM gây quá tải trình duyệt. Giải pháp kiến trúc mảng nào được áp dụng để giải quyết triệt để vấn đề này?

Phân tích bản chất

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi arrays liên quan cùng chủ đề