Tại sao việc lạm dụng Global Selectors trong jQuery lại gây suy giảm hiệu năng và cách khắc phục?

Question

Accepted Answer

Bản chất vấn đề
Khi sử dụng các bộ chọn toàn cục như $('.my-class') hoặc $('div input'), trình duyệt phải quét toàn bộ cây DOM từ gốc (document) để tìm kiếm phần tử khớp lệnh, làm tốn tài nguyên CPU.
Giải pháp tối ưu

Giới hạn phạm vi tìm kiếm (Context): Truyền thêm tham số ngữ cảnh (context) vào bộ chọn để jQuery chỉ tìm kiếm trong một phạm vi hẹp hơn.
Lưu trữ cache biến jQuery: Không gọi lại cùng một bộ chọn nhiều lần trong hàm, hãy lưu vào biến.

Ví dụ minh họa
// Không tối ưu
$('.container .item').css('color', 'red');
$('.container .item').addClass('active');

// Tối ưu bằng Context và Cache biến
var $container = $('#container-id');
var $items = $('.item', $container);
$items.css('color', 'red').addClass('active');
Lưu ý thực chiến
Ưu tiên sử dụng ID selector ($('#element-id')) vì jQuery sẽ ánh xạ trực tiếp xuống hàm tối ưu gốc của trình duyệt là document.getElementById(), mang lại tốc độ xử lý nhanh nhất.

Tại sao việc lạm dụng Global Selectors trong jQuery lại gây suy giảm hiệu năng và cách khắc phục?

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