selectors ใน jQuery ถึงแม้ว่าจะเป็นจุดเล็กๆ น้อยๆ แต่ก็ปฏิเสธไม่ได้ว่าเป็นสิ่งที่เราใช้บ่อยที่สุด เพราะเราต้องมีการเลือก element/s ก่อนที่จะนำไปทำอย่างอื่นต่อ ดังนั้น หากเราให้ความสำคัญและปรับแก้ให้มันมีประสิทธิภาพตามที่มันควรจะเป็น ก็จะเป็นการเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเราไปด้วย
[imooh_google_ads]
ลองมาดูกันซิว่า เราใช้ selector ได้ดีแค่ไหน ^^
ID-Based Selectors เป็นการใช้ selector ด้วย id ของ element เป็นหลัก ถ้าเป็นไปได้ก็ควรใช้ ID ใน selector
// เร็ว: $( "#container div.robotarm" ); // เร็วกว่า: $( "#container" ).find( "div.robotarm" );
การใช้ .find() จะเร็วกว่า เพราะเราใช้ ID ในการเลือก element หลักก่อน ซึ่งการใช้ ID จะเป็นการเรียกใช้งานฟังก์ชัน document.getElementById() ที่เป็น native ฟังก์ชัน ที่ติดมากับ browser จะทำให้ทำงานเร็วกว่า
Specificity ควรให้ selector ที่มีความเจาะจงมากอยู่ด้านขวามือ
// จากเดิม: $( "div.data .column" ); // ควรปรับเป็น: $( ".data td.column" );
หากต้องการใช้ tag.class ถ้าเป็นไปได้ควรให้อยู่ด้านขวาสุดของ selector และใช้เฉพาะแท็ก (tag) หรือ class ในฝั่งซ้ายมือ
Avoid Excessive Specificity หลีกเลี่ยง selector ที่เฉพาะเจาะจงมากเกินไป เช่น
$( ".data table.wrapper td.column" ); // ควรปรับเป็น: ตัด selector ตรงกลางออก $( ".data td.column" );
Avoid the Universal Selector หลีกเลี่ยงการใช้ selector จำพวก *
$( ".buttons > *" ); // ช้า $( ".buttons" ).children(); // ควรใช้เป็นแบบนี้ $( ".category :radio" ); // มองว่าเป็น universal selection. $( ".category *:radio" ); // เหมือนบรรทัดบน แต่มีการใส่ * ให้เห็นด้วย $( ".category input:radio" ); // ควรใช้แบบนี้
การใช้งาน selector ถึงแม้ว่าจะเป็นเพียงจุดเล็กๆ แต่ถ้าหากเว็บมีขนาดใหญ่และมีคนเข้าชมจำนวนมากๆ จากสิ่งเล็กๆ ก็อาจจะกลายเป็นปัญหาใหญ่สำหรับเราก็ได้ ใส่ใจในรายละเอียดซักนิดแล้วชีวิตจะง่ายขึ้นครับ ^^
อ่านเพิ่มเติม: Optimize Selectors