Cha mẹ(), thay thế nhanh hơn?

Question

Tôi đang làm việc với một bảng điều khiển của divs và mỗi div nó có một cây trong đó các nút được. Mỗi lần tôi phải biết id nào của div đó là vì vậy tôi đang sử dụng parent() rất nhiều.

Chủ yếu là tôi đang làm $(this).parent().parent().parent() để tìm ID của div để tôi có thể đặt biến cho nó. Ứng dụng được dựa trên id của mỗi div.

Có nên xem xét chậm sử dụng cha mẹ() tối đa 3 lần nhưng khá nhiều trên mọi chức năng?

Có phương án nào khác không?

Tôi đang tìm một thứ gì đó giống như kiểu điểm chuẩn cho thấy những gì nhanh hơn.

Dưới đây là một ví dụ về cây:

<div id="6179827893" class="dashdiv"> 
    <div class="buttons"> 
    <li><a href="#" class="btn1">Button 1</a></li> 
    <li><a href="#" class="btn2">Button 2</a></li> 
    <li><a href="#" class="btn3">Button 3</a></li> 
    <li><a href="#" class="btn4">Button 4</a></li> 
    <li><a href="#" class="btn5">Button 5</a></li> 
    <li><a href="#" class="btn6">Button 6</a></li> 
    </div> 
    <div class="dashcontent"> 

    .... 

    </div> 
</div> 

Answer 1

Bạn có một vài tùy chọn để đạt được hiệu quả tương tự.

Điểm chuẩn: http://jsperf.com/parents-method. Theo tiêu chuẩn này, phương pháp của tôi nhanh hơn khoảng 100 lần so với phương pháp của bạn.

Method (see below) : Operations per second (higher is better) 
parentNode3x  : 4447k 
$(parentNode3x) : 204K 
$().closest  : 35k 
$().parents  : 9k 
$().parent()3x  : 44k 

// Likely the fastest way, because no overhead of jQuery is involved. 
var id = this.parentNode.parentNode.parentNode.id; 

// Alternative methods to select the 3rd parent: 
$(this.parentNode.parentNode.parentNode) // Native DOM, wrapped in jQuery 

// Slowpokes 
$(this).closest('.dashdiv')    // Hmm. 
$(this).parents('.dashdiv:first')  // Hmm... 

Answer 2

Bạn có thể được tốt hơn bằng cách sử dụng .closest(), như thế này: $(this).closest('.dashdiv')

Nó không phải bất kỳ nhanh hơn từ quan điểm của một động cơ của xem, kể từ khi bạn đang vẫn lặp lại thông qua các lớp DOM, nhưng rõ ràng hơn đối với người mới đến cũng như mã ngắn hơn.

BÌNH LUẬN

Nếu đó là tốc độ tinh khiết bạn sau đó, bạn cũng có thể bỏ qua jQuery hoàn toàn và sử dụng node.parentNode để thay thế. Nhưng điều này đang đi vào vấn đề niggly của chu kỳ đếm, và tôi nghĩ rằng đó là một học tập.

Nếu bạn đang viết mã hiệu suất cao cho sản xuất chính, như công cụ tìm kiếm thương mại hoặc nhà cung cấp email trực tuyến, thì việc đếm chu kỳ rất quan trọng vì mọi tối ưu hóa nhỏ được nhân lên hàng nghìn lần. Với tất cả sự tôn trọng, tôi nghi ngờ bạn đang viết loại mã đó.

Nếu bạn đang viết nội dung nào đó sẽ bị một vài người đánh vào một lúc, tối đa thì tối ưu hóa nhỏ là một bài tập trí tuệ sẽ không ảnh hưởng đến kết quả theo bất kỳ cách nào đáng chú ý. Bạn sẽ phải cải thiện hiệu suất của mã của bạn bằng hàng trăm mili giây trước khi bất kỳ người dùng nào thậm chí sẽ bắt đầu chú ý và mã này sẽ không làm điều đó.

Thay vào đó, điều quan trọng hơn rất nhiều khi nghĩ về nhà phát triển tiếp theo, những người sẽ xem mã của bạn. Đối với nhà phát triển đó, điều quan trọng là phải có mã rõ ràng, được viết tốt ngay lập tức truyền đạt những gì nó đang làm. Chuỗi các phương pháp làm mờ mắt như parent().parent().parent() có thể làm mờ và gây nhầm lẫn cho các nhà phát triển khác, không nói gì về số node.parentNode.parentNode.parentNode

- đó là lý do tại sao .closest() được tạo ngay từ đầu. Nó rõ ràng, súc tích, và không đáng chú ý là kém hiệu quả hơn so với các chuỗi nó thay thế. 999 lần trong số một ngàn, đó là cách bạn nên đi.

Answer 3

Trước tiên, không tối ưu hóa sớm. Nếu nó không gây ra một vấn đề (và kiểm tra kỹ lưỡng bằng mọi cách, trên một loạt các nền tảng) thì đừng lo lắng về nó.

Có một tối ưu hóa khả năng: sử dụng thuộc tính DOM bản địa:

var id = this.parentNode.parentNode.parentNode.id; 

Lưu ý rằng jQuery cách đẹp nhất để làm điều này (mà sẽ chậm hơn, nhưng điều đó có thể không phải là một vấn đề) là với closest:

$(this).closest('div.dashdiv').prop('id'); 

Answer 4

Nếu trình xử lý hiện đang ở trên các yếu tố <a>, hãy đặt chúng trên các phần tử .dashdiv thay thế.

Sau đó, bạn có thể làm this.id nếu e.target là yếu tố <a>.

$('.dashdiv').click(function(e) { 
    if(e.target.nodeName.toLowerCase() === 'a') { 
     alert(this.id); 
    } 
});