คำเตือนการใช้งาน jQuery ที่ไม่มีประสิทธิภาพใน PHPStorm IDE

ฉันเพิ่งอัปเกรด PHPStorm IDE เวอร์ชันของฉันและตอนนี้เตือนฉันเกี่ยวกับการใช้งาน jQuery ที่ไม่มีประสิทธิภาพ

ตัวอย่างเช่น:

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

แจ้งคำเตือนนี้:

ตรวจสอบว่าใช้ตัวเลือก jQuery อย่างมีประสิทธิภาพ แนะนำให้แยกตัวเลือกลูกหลานซึ่งนำหน้าด้วยตัวเลือก ID และเตือนเกี่ยวกับตัวเลือกที่ซ้ำกันซึ่งสามารถแคชได้

ดังนั้นคำถามของฉันคือ:

เหตุใดจึงไม่มีประสิทธิภาพและวิธีใดที่มีประสิทธิภาพในการเลือกตัวเลือกข้างต้น

ฉันเดาว่า:

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

เป็นวิธีที่ถูกต้องหรือไม่?

ฉันมีคำถามเดียวกันในวันนี้และก็สามารถที่จะหาทางออกขอบคุณที่สกอตต์ Kosman ที่นี่

โดยทั่วไปคำตอบคือเลือก ID ทีละรหัสจากนั้นใช้.find(...)สำหรับอะไรก็ได้ด้านล่าง ดังนั้นยกตัวอย่างของคุณ:

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

การเปลี่ยนเป็นสิ่งนี้ทำให้ PhpStorm มีความสุขและเห็นได้ชัดว่าเร็วกว่าสองเท่า :

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

ฉันเชื่อว่าความแตกต่างระหว่างสองวิธีเมื่อใช้ jQuery และเบราว์เซอร์เวอร์ชันล่าสุดนั้นไม่สำคัญ ฉันสร้างการทดสอบที่แสดงให้เห็นว่าตอนนี้เร็วขึ้น 10% ในการทำตัวเลือกแบบรวมแทนที่จะเลือกบน id จากนั้นค้นหากรณีที่ง่ายมาก:

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

สำหรับการเลือกเด็กหลายคนตามชั้นเรียนที่ระดับความลึกใด ๆ "ค้นหา" ดูเหมือนจะเร็วกว่า:

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

มีการพูดคุยเกี่ยวกับเรื่องนี้ในฟอรัม jQuery แต่มันมีอายุ 3 ปี: https://forum.jquery.com/topic/which-jquery-selection-is-efficient ตามที่พวกเขาชี้ให้เห็นที่นี่หากคุณทำมาก ๆ การดำเนินการกับตัวเลือกรหัสเดียวกันการปรับปรุงประสิทธิภาพที่ดีที่สุดพบได้จากการแคชองค์ประกอบระดับบนสุด ในทางกลับกันหากคุณทำการเลือกเพียงไม่กี่รายการประสิทธิภาพแทบจะไม่แตกต่างกันเลย

ด้วยเหตุนี้ฉันจึงเชื่อว่า IntelliJ กำลังคุยโวถึงความสำคัญของรูปแบบรหัสนี้

คำถามแรกคือกด Alt + Enter แล้วเลือกเคล็ดลับแรกในรายการจากนั้นกด Enter คุณจะเห็นว่าสิ่งใดคิดว่าเป็นวิธีที่มีประสิทธิภาพมากที่สุด