Chi phí '$ (this)' này là bao nhiêu?

Question

Người dân ở đây thường đề nghị để cache jQuery đối tượng được tạo ra từ một yếu tố DOM, giống như với mã này:

$('#container input').each(function() { 
    $(this).addClass('fooClass'); 
    $(this).attr('data-bar', "bar"); 
    $(this).css('background-color', 'red'); 
}); 

• Liệu bộ nhớ đệm đối tượng jQuery thực sự cải thiện hiệu suất của mã của chúng tôi?
• Điều gì xảy ra "hậu trường" khi bạn chuyển một phần tử DOM tới hàm tạo jQuery?

Answer 1

Trong jQuery tag info cảnh báo này xuất hiện:

Các jQuery Hàm $() là tốn kém. Gọi nó liên tục là vô cùng hiệu quả.

Vâng ... đó là sự thật duy nhất cho selectors chuỗi, mà được phân tích với regex để tìm hiểu xem họ là:

quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/ 

Sau đó, nếu chuỗi là một chọn (trừ id), jQuery đi qua DOM để tìm một trận đấu với find chức năng đắt tiền của mình:

} else if (!context || context.jquery) { 
    return (context || rootjQuery).find(selector); 
} 

vì vậy, có nó là đắt tiền, nhưng điều đó chỉ đúng cho selectors!

Nếu chúng ta vượt qua một DOMElement, hành động chỉ jQuery làm là tiết kiệm tham số DOMElement như bối cảnh của đối tượng jQuery mới được tạo ra và thiết lập chiều dài của bối cảnh đến 1:

// Handle $(DOMElement) 
if (selector.nodeType) { 
    this.context = this[0] = selector; // Selector here is a DOMElement 
    this.length = 1; 
    return this; 
} 

tôi đã làm some tests with jsPerf , và tôi thấy rằng thực sự bộ nhớ đệm đối tượng jQuery chỉ có một hiệu ứng nhỏ:

Trong Chrome nó chậm hơn chỉ 7%. (Trong IE đó là một chút ít quan trọng hơn: 12%.)

Answer 2

Để trả lời câu hỏi thứ hai của bạn, nhìn vào source:

// Handle $(DOMElement) 
if (selector.nodeType) { 
    this.context = this[0] = selector; 
    this.length = 1; 
    return this; 
} 

Answer 3

liên quan đến sự khác biệt hiệu suất Với, nếu bạn đang tìm kiếm một so sánh trực tiếp giữa hai, rất hữu ích khi xóa bất kỳ mã bổ sung nào có thể làm lệch kết quả, như chọn DOM và các phương thức khác không liên quan trực tiếp.

http://jsperf.com/this-cost/2

Trong một bối cảnh thế giới thực hơn, sự khác biệt tương đối là nhỏ như thử nghiệm của bạn cho thấy

Một điều cần lưu ý là mỗi khi bạn tạo một đối tượng jQuery, bộ nhớ cần phải được cấp phát cho nó, điều này làm tăng thêm công việc mà bộ thu gom rác cần làm.

Vì vậy, tôi nghĩ lý do mọi người đề xuất lưu vào bộ nhớ đệm là từ phần nào của quan điểm chính. Thêm công việc đang được thực hiện, trong khi nó thường sẽ không có một tác động đáng chú ý, cuối cùng yêu cầu một số chi phí mà có thể dễ dàng tránh được.

Answer 4

Một điều mà tất cả các bài kiểm tra hiệu suất thời gian chạy ở đây bỏ lỡ là một yếu tố nữa chính:

Mạng băng thông.

Caching $(this) vào biến cục bộ nói chung sẽ giảm kích thước tập lệnh của bạn, đặc biệt khi được rút gọn (vì this không thể giảm từ bốn ký tự).

Cân nhắc: đầu ra minified

function hello(text) { 
    $(this).attr(); 
    $(this).css(); 
    $(this).data(); 
    $(this).click(); 
    $(this).mouseover(); 
    $(this).mouseleave(); 
    $(this).html(text); 
} 
hello('Hello world'); 

Đóng trình biên dịch là

function hello(a){$(this).attr();$(this).css();$(this).data();$(this).click();$(this).mouseover();$(this).mouseleave();$(this).html(a)}hello("Hello world"); 

Điều này tiết kiệm 39 byte (20%). Bây giờ xem xét:

function hello(name) { 
    var $this = $(this); 
    $this.attr(); 
    $this.css(); 
    $this.data(); 
    $this.click(); 
    $this.mouseover(); 
    $this.mouseleave(); 
    $this.html(name); 
} 
hello('Hello world'); 

Sản lượng minified là

function hello(b){var a=$(this);a.attr();a.css();a.data();a.click();a.mouseover();a.mouseleave();a.html(b)}hello("Hello world"); 

Điều này tiết kiệm 74 byte (37%), gần gấp đôi tiết kiệm byte của chúng tôi. Rõ ràng, tiết kiệm trong thế giới thực trong các kịch bản lớn sẽ thấp hơn, nhưng bạn vẫn đứng để đạt được sự giảm đáng kể kích thước của kịch bản của bạn bằng bộ nhớ đệm.

Thực sự, chỉ có một nhược điểm để lưu vào bộ nhớ cache $(this). Bạn nhận được hiệu suất thời gian chạy tối thiểu nhưng có thể đo lường được. Quan trọng hơn, bạn có thể giảm số lượng byte di chuyển qua dây và chuyển trực tiếp thành nhiều đô la hơn vì faster page loads equal more sales.

Khi bạn xem xét theo cách đó, bạn thực sự có thể nói rằng có thể định giá đô la có giá trị để lặp lại $(this) và không lưu vào bộ nhớ cache.