Khi xử lý các cấu trúc dữ liệu JSON phân cấp có kích thước cực lớn từ phía Client gửi lên, việc sử dụng hàm đệ quy để chuyển đổi khóa (ví dụ từ camelCase sang snake_case) có thể gây treo giao diện hoặc đơ luồng chính (Main Thread Blocking). Giải pháp kiến trúc nào được khuyên dùng?

Question

Accepted Answer

Nguyên nhân gây nghẽn luồng
JavaScript chạy trên mô hình đơn luồng (Single-threaded Event Loop). Khi thực hiện duyệt đệ quy sâu trên một cây JSON lớn (hàng chục nghìn node), CPU phải thực thi liên tục mà không nhường quyền điều khiển cho Event Loop để render giao diện, dẫn đến hiện tượng UI Freezing.
Các giải pháp kiến trúc tối ưu

Chia nhỏ tác vụ (Task Chunking / Asynchronous Recursion):
Sử dụng setTimeout, setImmediate hoặc requestAnimationFrame để ngắt nhịp đệ quy, đưa các tác vụ xử lý nhánh con vào hàng đợi vi tác vụ hoặc vĩ tác vụ, giúp Main Thread thở và duy trì FPS ổn định.
Sử dụng Web Workers:
Chuyển toàn bộ quá trình xử lý đệ quy JSON nặng sang một Background Thread (Web Worker). Dữ liệu được truyền qua lại thông qua postMessage. Điều này giữ cho Main Thread hoàn toàn rảnh rỗi để phục vụ giao diện người dùng.
Khử đệ quy kết hợp Generator Functions:
Sử dụng cú pháp yield trong hàm Generator để xử lý từng phần của cấu trúc phân cấp một cách lazy evaluation.

Ví dụ minh họa sử dụng Generator kết hợp khử đệ quy:
function* flatDeepGenerator(obj) {
    const stack = [obj];
    while (stack.length > 0) {
        const current = stack.pop();
        if (typeof current === 'object' && current !== null) {
            for (const key of Object.keys(current)) {
                stack.push(current[key]);
                yield { key, value: current[key] };
            }
        }
    }
}

Nguyên nhân gây nghẽn luồng

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