มีวิธีที่ต้องการในการพิจารณาว่าองค์ประกอบถูกกำหนดคลาสจากมุมมองด้านประสิทธิภาพหรือไม่?
$('#foo').hasClass('bar');
หรือ
$('#foo').is('.bar');
คำตอบ:
ฉันทำแบบทดสอบหลังจากแสดงความคิดเห็นและโหวตโหวตสี่ครั้งเพื่อแสดงความคิดเห็น ปรากฎว่าสิ่งที่ฉันพูดเป็นคำตอบที่ถูกต้อง นี่คือผลลัพธ์:
http://jsperf.com/hasclass-vs-is-so
isเป็นอเนกประสงค์เช่นคุณสามารถทำis('.class'), is(':checked')ฯลฯ ซึ่งหมายความว่าisมีขึ้นจะทำอย่างไรที่จะhasClassถูก จำกัด ซึ่งตรวจสอบเฉพาะสำหรับเป็นชุดชั้นเรียนหรือไม่
ดังนั้นhasClassควรเร็วขึ้นหากประสิทธิภาพในระดับใด ๆ เป็นสิ่งสำคัญของคุณ
เนื่องจากisเป็นข้อมูลทั่วไปมากกว่าhasClassและใช้filterในการประมวลผลนิพจน์ที่ให้มาจึงดูเหมือนว่าhasClassจะเร็วกว่า
ฉันรันโค้ดต่อไปนี้จากคอนโซล Firebug:
function usingIs() {
for (var i=0; i<10000;i++) {
$('div#example-0').is('.test');
}
}
function usingHas(){
for (var i=0; i<10000;i++) {
$('div#example-0').hasClass('test');
}
}
usingIs();
usingHas();
ฉันได้:
ไม่ใช่ความแตกต่างมากนัก แต่อาจเกี่ยวข้องหากคุณทำการทดสอบจำนวนมาก
แก้ไขเมื่อฉันพูดว่า 'ไม่ใช่ความแตกต่างอย่างมากประเด็นของฉันคือคุณต้องทำ 10,000 รอบเพื่อให้เห็นความแตกต่าง 0.8 วินาที ฉันประหลาดใจที่เห็นเว็บแอปพลิเคชันที่การเปลี่ยนจากisเป็นhasClassจะเห็นการปรับปรุงประสิทธิภาพทั้งหมดอย่างมีนัยสำคัญ อย่างไรก็ตามฉันให้สิทธิ์ว่านี่เป็นการปรับปรุงความเร็ว 35%
ทั้งสองอย่างน่าจะใกล้เคียงกันในแง่ของประสิทธิภาพ แต่$('#foo').hasClass('bar');ดูเหมือนว่าจะอ่านได้ง่ายกว่าและถูกต้องตามความหมายสำหรับฉัน