Cảnh báo sử dụng jQuery không hiệu quả trong PHPStorm IDE

Gần đây tôi đã nâng cấp phiên bản PHPStorm IDE của mình và hiện nó cảnh báo tôi về việc sử dụng jQuery không hiệu quả.

Ví dụ:

var property_single_location = $("#property [data-role='content'] .container");

Nhắc cảnh báo này:

Kiểm tra xem bộ chọn jQuery có được sử dụng một cách hiệu quả hay không. Nó gợi ý để tách các bộ chọn con cháu được mở đầu bằng bộ chọn ID và cảnh báo về các bộ chọn trùng lặp có thể được lưu vào bộ nhớ đệm.

Vì vậy, câu hỏi của tôi là:

Tại sao điều này không hiệu quả và cách hiệu quả để thực hiện bộ chọn ở trên là gì?

Tôi đoán ở:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Đây có phải là hướng đi đúng?

Tôi đã có cùng một câu hỏi hôm nay và có thể tìm ra giải pháp nhờ Scott Kosman ở đây .

Về cơ bản câu trả lời là chọn ID riêng lẻ và sau đó sử dụng .find(...)cho bất kỳ thứ gì bên dưới. Vì vậy, lấy ví dụ của bạn:

$("#property [data-role='content'] .container");

Thay đổi nó thành này làm cho PhpStorm hài lòng và rõ ràng có thể nhanh hơn gấp đôi :

$("#property").find("[data-role='content'] .container");

Tôi tin rằng sự khác biệt giữa hai phương pháp khi sử dụng các phiên bản jQuery và trình duyệt gần đây là không đáng kể. Tôi đã xây dựng một bài kiểm tra cho thấy rằng bây giờ thực sự nhanh hơn 10% để thực hiện một bộ chọn kết hợp thay vì lựa chọn trên id và sau đó tìm một trường hợp rất đơn giản:

http://jsperf.com/jquery-find-vs-insel

Để chọn nhiều trẻ theo lớp ở bất kỳ độ sâu nào, "tìm" có vẻ nhanh hơn:

http://jsperf.com/jquery-find-vs-insel/7

Đã có một số cuộc thảo luận về điều này trên các diễn đàn jQuery, nhưng nó đã được 3 năm tuổi: https://forum.jquery.com/topic/which-jquery-selection-is-eosystem Như họ đã chỉ ra ở đây, nếu bạn đang làm nhiều hoạt động trên cùng một bộ chọn id, cải thiện hiệu suất lớn nhất được tìm thấy bằng cách lưu vào bộ nhớ đệm phần tử cấp cao nhất. Mặt khác, nếu bạn chỉ thực hiện một vài lựa chọn, sẽ hầu như không có sự khác biệt về hiệu suất.

Vì vậy, tôi tin rằng IntelliJ đang phóng đại tầm quan trọng của kiểu mã này.

Câu hỏi đầu tiên là nhấn Alt + Enter, và chọn mẹo đầu tiên trong danh sách, sau đó nhấn Enter, bạn sẽ thấy nó nghĩ gì là cách hiệu quả nhất.