Phương pháp nhanh nhất để chọn các phần tử con trong jQuery là gì?

Theo như tôi biết, có một số cách để chọn các phần tử con trong jQuery .

//Store parent in a variable  
var $parent = $("#parent");

Phương pháp 1 (bằng cách sử dụng một phạm vi)

$(".child", $parent).show();

Phương pháp 2 (phương thức find ())

$parent.find(".child").show();

Phương pháp 3 (Chỉ dành cho trẻ em ngay lập tức)

$parent.children(".child").show();

Phương pháp 4 (thông qua bộ chọn CSS) - được đề xuất bởi @spinon

$("#parent > .child").show();

Cách 5 (giống với Cách 2 ) - theo @Kai

$("#parent .child").show();

Tôi không quen với việc lập hồ sơ để có thể tự mình điều tra vấn đề này, vì vậy tôi rất muốn biết bạn phải nói gì.

Tái bút Tôi hiểu rằng đây có thể là một bản sao của câu hỏi này nhưng nó không bao gồm tất cả các phương pháp.

Phương pháp 1 và phương pháp 2 giống hệt nhau với điểm khác biệt duy nhất là phương pháp 1 cần phân tích cú pháp phạm vi được truyền và dịch nó thành lời gọi tới $parent.find(".child").show();.

Phương pháp 4 và Phương pháp 5 đều cần phân tích cú pháp bộ chọn và sau đó chỉ cần gọi: $('#parent').children().filter('.child')và $('#parent').filter('.child')tương ứng.

Vì vậy, phương pháp 3 sẽ luôn là nhanh nhất vì cần ít công việc nhất và sử dụng phương pháp trực tiếp nhất để lấy trẻ đầu cấp.

Dựa trên các bài kiểm tra tốc độ đã được sửa đổi của Anurag tại đây: http://jsfiddle.net/QLV9y/1/

Kiểm tra tốc độ: (Nhiều hơn là Tốt hơn)

Trên Chrome , Phương pháp 3 là tốt nhất, sau đó là Phương pháp 1/2 và sau đó là 4/5

Trên Firefox , Phương pháp 3 vẫn là tốt nhất, sau đó là Phương pháp 1/2 và sau đó là 4/5

Trên Opera , phương pháp 3 vẫn là tốt nhất, sau đó là phương pháp 4/5 và sau đó là 1/2

Trên IE 8 , mặc dù tổng thể chậm hơn các trình duyệt khác, nhưng nó vẫn tuân theo thứ tự Phương pháp 3, 1,2,4,5.

Nhìn chung, phương pháp 3 là phương pháp tổng quát tốt nhất để sử dụng vì nó được gọi trực tiếp và nó không cần phải duyệt qua nhiều hơn một cấp của các phần tử con không giống như phương pháp 1/2 và nó không cần phải được phân tích cú pháp như phương pháp 4/5

Mặc dù vậy, hãy nhớ rằng trong một số trường hợp này, chúng ta đang so sánh quả táo với quả cam vì Phương pháp 5 xem xét tất cả trẻ em thay vì những đứa trẻ cấp một.

Phương pháp 1

Không thể ngắn hơn và nhanh hơn bằng cách sử dụng jQuery. Cuộc gọi này trực tiếp đi xuống $(context).find(selector)( phương pháp 2 , do tối ưu hóa), đến lượt nó, sẽ gọi getElementById.

Phương pháp 2

Làm tương tự, nhưng không có một số lệnh gọi hàm nội bộ không cần thiết.

Phương pháp 3

sử dụng children()nhanh hơn sử dụng find(), nhưng tất nhiên, children()sẽ chỉ tìm thấy các phần tử con trực tiếp của phần tử gốc trong khi find()sẽ tìm kiếm đệ quy từ trên xuống cho tất cả các phần tử con (bao gồm cả các phần tử con)

Phương pháp 4

Sử dụng các bộ chọn như thế này, phải chậm hơn. Vì sizzle(là công cụ bộ chọn từ jQuery) hoạt động từ phải sang trái , nó sẽ khớp với TẤT CẢ các lớp .childtrước khi xem chúng có phải là con trực tiếp từ id 'cha' hay không.

Phương pháp 5

Như bạn đã nói chính xác, cuộc gọi này cũng sẽ tạo ra một $(context).find(selector)cuộc gọi, do một số tối ưu hóa trong jQueryhàm, nếu không, nó cũng có thể đi qua (chậm hơn) sizzle engine.

Vì nó là một bài cũ, và mọi thứ thay đổi theo thời gian. Tôi đã thực hiện một số thử nghiệm trên các phiên bản trình duyệt cuối cùng cho đến nay và tôi đăng nó ở đây để tránh hiểu lầm.

Sử dụng jQuery 2.1 trên các trình duyệt tương thích HTML5 và CSS3, hiệu suất sẽ thay đổi.

Đây là kịch bản thử nghiệm và kết quả:

function doTest(selectorCallback) {
    var iterations = 100000;

    // Record the starting time, in UTC milliseconds.
    var start = new Date().getTime();

    for (var i = 0; i < iterations; i++) {
        // Execute the selector. The result does not need to be used or assigned
        selectorCallback();
    }

    // Determine how many milliseconds elapsed and return
    return new Date().getTime() - start;
}

function start() {
    jQuery('#stats').html('Testing...');
    var results = '';

    results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms";
    results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms";
    results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms";
    results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms";
    $parent = jQuery('#parent');
    results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms";

    jQuery('#stats').html(results);
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" />
    <title>HTML5 test</title>
    <script src="//code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<div id="stats"></div>
<button onclick="start()">Test</button>

<div>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

</body>
</html>

Vì vậy, với 100 000 lần lặp tôi nhận được:

(Tôi đã thêm chúng dưới dạng img cho mục đích định dạng.)

Bạn có thể tự chạy đoạn mã để kiểm tra;)