Khi xử lý mảng chứa hàng triệu đối tượng dữ liệu trong JavaScript, việc gọi hàm sort trực tiếp có thể làm đóng băng (freeze) luồng chính (Main Thread). Giải pháp kiến trúc nào được sử dụng để tối ưu hóa trải nghiệm người dùng trong trường hợp này?

Question

Accepted Answer

Bản chất vấn đề
JavaScript chạy trên một mô hình đơn luồng (Single-threaded Event Loop). Khi bạn thực hiện các thuật toán sắp xếp nặng (ví dụ sắp xếp mảng 1.000.000 phần tử phức tạp), CPU phải thực hiện hàng triệu phép so sánh liên tục. Điều này chiếm trọn Main Thread, khiến trình duyệt không thể xử lý các sự kiện render giao diện (UI Rendering), phản hồi thao tác click của người dùng, dẫn đến lỗi giao diện bị đơ (UI Freezing).
Giải pháp kiến trúc Enterprise
Để giải quyết triệt để vấn đề này, các kỹ sư phần mềm áp dụng hai giải pháp chính:

Sử dụng Web Workers:
Tách biệt toàn bộ logic xử lý tính toán và sắp xếp sang một luồng nền độc lập (Background Thread). Main Thread sẽ gửi dữ liệu qua Web Worker bằng phương thức postMessage, Worker thực hiện sắp xếp và gửi kết quả ngược lại.

// Main Thread (script.js)
const worker = new Worker('sortingWorker.js');
worker.postMessage(largeDataset);

worker.onmessage = function(event) {
  const sortedData = event.data;
  updateUIRender(sortedData); // Cập nhật giao diện mượt mà
};

// Web Worker (sortingWorker.js)
onmessage = function(event) {
  const data = event.data;
  data.sort((a, b) => a.value - b.value);
  postMessage(data);
};

Kỹ thuật phân đoạn tác vụ (Time Slicing / Chunking):
Nếu không thể dùng Web Worker, chia nhỏ mảng lớn thành nhiều phân đoạn nhỏ và sử dụng setTimeout hoặc requestAnimationFrame để ngắt quãng thời gian thực thi, nhường quyền kiểm soát lại cho Main Thread render khung hình.

Lưu ý kinh nghiệm thực chiến
Việc truyền dữ liệu lớn qua Web Worker thông qua postMessage có thể gây tốn chi phí clone dữ liệu (structured clone). Nên cân nhắc sử dụng Transferable Objects (như ArrayBuffer) nếu làm việc với dữ liệu nhị phân lớn để đạt hiệu năng tối ưu tuyệt đối.

Bản chất vấn đề

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 sorting liên quan cùng chủ đề