ปรับ selectors เพื่อประสิทธิภาพในการใช้งาน jQuery

selectors ใน jQuery ถึงแม้ว่าจะเป็นจุดเล็กๆ น้อยๆ แต่ก็ปฏิเสธไม่ได้ว่าเป็นสิ่งที่เราใช้บ่อยที่สุด เพราะเราต้องมีการเลือก element/s ก่อนที่จะนำไปทำอย่างอื่นต่อ ดังนั้น หากเราให้ความสำคัญและปรับแก้ให้มันมีประสิทธิภาพตามที่มันควรจะเป็น ก็จะเป็นการเพิ่มประสิทธิภาพให้กับเว็บไซต์ของเราไปด้วย



ลองมาดูกันซิว่า เราใช้ 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