Trẻ em nhanh nhất () hoặc find () trong jQuery là gì?

Để chọn một nút con trong jQuery, người ta có thể sử dụng children () nhưng cũng có thể tìm ().

Ví dụ:

$(this).children('.foo');

cho kết quả tương tự như:

$(this).find('.foo');

Bây giờ, tùy chọn nào là nhanh nhất hoặc ưa thích và tại sao?

children()chỉ nhìn vào các phần tử con ngay lập tức của nút, trong khi di find()chuyển ngang qua toàn bộ DOM bên dưới nút, do đó children() sẽ nhanh hơn khi đưa ra các triển khai tương đương. Tuy nhiên, find()sử dụng các phương thức trình duyệt riêng, trong khi children()sử dụng JavaScript được diễn giải trong trình duyệt. Trong các thí nghiệm của tôi không có nhiều sự khác biệt về hiệu suất trong các trường hợp điển hình.

Việc sử dụng tùy thuộc vào việc bạn chỉ muốn xem xét con cháu ngay lập tức hay tất cả các nút bên dưới nút này trong DOM, nghĩa là chọn phương thức phù hợp dựa trên kết quả bạn mong muốn, chứ không phải tốc độ của phương pháp. Nếu hiệu suất thực sự là một vấn đề, thì hãy thử nghiệm để tìm giải pháp tốt nhất và sử dụng giải pháp đó (hoặc xem một số điểm chuẩn trong các câu trả lời khác tại đây).

Thử nghiệm jsPerf này cho thấy find () nhanh hơn. Tôi đã tạo ra một bài kiểm tra kỹ lưỡng hơn và nó vẫn có vẻ như find () vượt trội hơn trẻ em ().

Cập nhật: Theo nhận xét của tvanfosson, tôi đã tạo một trường hợp thử nghiệm khác với 16 cấp độ lồng nhau. find () chỉ chậm hơn khi tìm tất cả các div có thể, nhưng find () vẫn vượt trội so với trẻ em () khi chọn cấp độ div đầu tiên.

trẻ em () bắt đầu vượt trội hơn find () khi có hơn 100 cấp độ lồng và khoảng hơn 4000 div để tìm () để vượt qua. Đó là một trường hợp thử nghiệm thô sơ, nhưng tôi vẫn nghĩ rằng find () nhanh hơn trẻ em () trong hầu hết các trường hợp.

Tôi đã xem qua mã jQuery trong Công cụ dành cho nhà phát triển Chrome và nhận thấy rằng trẻ em () bên trong thực hiện các cuộc gọi đến anh chị em (), bộ lọc () và trải qua một vài biểu thức chính hơn so với find ().

find () và children () đáp ứng các nhu cầu khác nhau, nhưng trong trường hợp find () và children () sẽ cho kết quả giống nhau, tôi khuyên bạn nên sử dụng find ().

Đây là một liên kết có một bài kiểm tra hiệu suất bạn có thể chạy. find()thực sự nhanh hơn khoảng 2 lần children().

Những người đó sẽ không nhất thiết cho cùng một kết quả: find()sẽ giúp bạn có được bất kỳ nút con cháu nào, trong khi đó children()sẽ chỉ giúp bạn có con ngay lập tức phù hợp.

Tại một thời điểm, find()đã chậm hơn rất nhiều vì nó phải tìm kiếm mọi nút con cháu có thể là một trận đấu, và không chỉ là những đứa trẻ ngay lập tức. Tuy nhiên, điều này không còn đúng nữa; find()nhanh hơn nhiều do sử dụng các phương pháp trình duyệt riêng.

Không ai trong số các câu trả lời khác xử lý các trường hợp sử dụng .children()hoặc .find(">")để chỉ tìm kiếm cho trẻ em ngay lập tức của một yếu tố phụ huynh. Vì vậy, tôi đã tạo ra một bài kiểm tra jsPerf để tìm hiểu , sử dụng ba cách khác nhau để phân biệt trẻ em.

Khi điều đó xảy ra, ngay cả khi sử dụng bộ chọn ">" bổ sung, .find()vẫn nhanh hơn rất nhiều so với .children(); trên hệ thống của tôi, gấp 10 lần.

Vì vậy, từ quan điểm của tôi, dường như không có nhiều lý do để sử dụng cơ chế lọc của .children()tất cả.

Cả hai find()và children()phương thức đều được sử dụng để lọc phần tử con của các phần tử phù hợp, ngoại trừ phần tử trước được di chuyển xuống bất kỳ cấp nào, phần sau sẽ di chuyển xuống một cấp.

Để đơn giản hóa:

1. find() - tìm kiếm thông qua các yếu tố phù hợp 'con, cháu, chắt ... tất cả các cấp.
2. children() - chỉ tìm kiếm thông qua con của các phần tử phù hợp (giảm một cấp).