Giảm thiểu trường hợp jQuery và tạo nhiều phiên bản

Question

Tôi đã bắt đầu một loạt các posts on javascript/jQuery optimization và tình cờ gặp phải kết quả thú vị này.

Tại sao nó giảm thiểu các đối tượng jQuery (bằng cách tìm kiếm từ một bộ sưu tập jQuery đã lưu trong bộ nhớ cache) có thể chậm hơn sau đó tạo thêm các đối tượng của các đối tượng jQuery?

Tôi đã choáng váng khi thấy kết quả của bài kiểm tra tôi đã chuẩn bị. Tôi luôn nghĩ rằng việc giảm thiểu việc tạo ra các phiên bản $ là chậm hơn.

Đây là những gì tôi được sử dụng để viết, như tôi nhớ cache cha mẹ (tôi gọi nó là "appRoot").

var appRoot = $("#appRoot"); 
    appRoot.find(".element1").css("color","red"); 
    appRoot.find(".element2").css("color","blue"); 

vs

$(".element1").css("color","red"); 
    $(".element2").css("color","blue"); 

Xem kết quả kiểm tra (kịch bản hơi khác nhau). jsperf minimize-jquery-object-creation nó chỉ ra rằng đoạn mã được lưu trong bộ nhớ cache chậm hơn đoạn mã chưa được đính kèm.

Tôi đang cố gắng hiểu tại sao?

Answer 1

Bạn cần phải xem xét rằng thử nghiệm của bạn chứa ít hơn 10 divs hoặc các yếu tố html khác. Lý do để viết mã như trong ví dụ đầu tiên là làm cho bộ chọn nhanh hơn, nhưng với chi phí của các cuộc gọi phương thức bổ sung. Normaly bộ chọn nên đắt hơn của hai cho đến nay để đạt được sẽ vượt quá sự mất mát nhưng với một DOM nhỏ này chọn sẽ rất rẻ không có vấn đề làm thế nào bạn viết nó.

Mọi người thường nhầm lẫn là không nhớ rằng một DOM phức tạp và lớn hơn sẽ thay đổi các nút cổ chai của mã. Tôi nghĩ jsperf nên có một số cảnh báo về điều này.

Answer 2

Tôi nghĩ rằng cuộc gọi find() là những thứ làm chậm tốc độ.

Lý do duy nhất để lưu vào bộ nhớ cache đối tượng jQuery là nếu bạn định tham chiếu hoặc thao tác nó nhiều lần. Nếu bạn chỉ cần thiết lập thuộc tính CSS và thuộc tính đó sẽ không bị thay đổi theo tuổi thọ của trang được hiển thị, thì không có lý do nào để xác định biến bộ nhớ cache.

Answer 3

Tôi nghĩ rằng đó là bởi vì trong "nhiều đối tượng jquery tạo", jQuery có thể làm cho việc sử dụng trực tiếp của API gần đây

document.getElementsByClassName("classvalue") 

trong trường hợp khác với "ít jquery" bạn phải luôn kiểm tra xem phần tử được tìm thấy nằm trong #appRoot cần nhiều thời gian hơn.

Dưới đây là một thử nghiệm sử dụng tài liệu như appRoot mà dường như thu hẹp khoảng cách một chút trên đường chạy trốn thứ hai: http://jsperf.com/minimize-jquery-object-creation/6