Tại sao các đối tượng jQuery cache?

Question

Vậy tại sao chúng ta phải nhớ các đối tượng jQuery?

Trong các tình huống sau:

var foo = $('#bar'); 
foo.attr('style','cool'); 
foo.attr('width','123'); 

$('#bar').attr('style','cool'); $('#bar').attr('width','123');

Tại sao là lựa chọn đầu tiên để tốt hơn nhiều so với tùy chọn thứ hai?

Nếu đó là do hiệu suất, làm cách nào để giảm mức sử dụng?

Answer 1

Vì hàm jQuery có nhiều mã trong đó, liên quan đến chi phí không cần thiết nếu bạn thực thi nó nhiều hơn một lần với cùng đầu vào mong đợi các đầu ra tương tự. Bằng cách lưu trữ kết quả, bạn lưu trữ một tham chiếu đến phần tử chính xác hoặc tập hợp các phần tử bạn đang tìm kiếm, do đó bạn không phải tìm kiếm lại toàn bộ DOM (ngay cả khi đó là tìm kiếm khá nhanh). Trong nhiều trường hợp (các trang đơn giản với một lượng nhỏ mã) bạn sẽ không nhận thấy sự khác biệt, nhưng trong trường hợp bạn làm điều đó có thể trở thành một sự khác biệt lớn.

Bạn có thể thấy điều này hoạt động theo testing your example in jsPerf.

Bạn cũng có thể coi nó như một ví dụ về mẫu cấu trúc tái cấu trúc Introduce Explaining Variable cho mục đích dễ đọc, đặc biệt với các ví dụ phức tạp hơn so với ví dụ trong câu hỏi.

Answer 2

Bộ chọn jQuery $('#foo') tìm kiếm toàn bộ DOM cho (các) phần tử phù hợp và sau đó trả về (các) kết quả.

Lưu các kết quả này có nghĩa là jQuery không phải tìm kiếm DOM mỗi khi bộ chọn được sử dụng.

EDIT: document.getElementById() là những gì jQuery sử dụng để tìm kiếm DOM, nhưng không bao giờ đủ jQuery.