jQuery: ความจำเพาะของตัวเลือกเพิ่มประสิทธิภาพด้วยการมอบหมาย .on() หรือไม่

ความจำเพาะช่วย…นิดหน่อย

ตามการทดสอบ JSPerf นี้ การเพิ่มความเฉพาะเจาะจงให้กับตัวเลือกใน ตัวอย่างที่โพสต์จะช่วยปรับปรุงประสิทธิภาพในการทดสอบซ้ำๆ อย่างต่อเนื่อง แต่ผลที่ได้อาจถือว่าไม่มีนัยสำคัญในระดับการโต้ตอบของผู้ใช้ ซึ่งเหตุการณ์เกิดขึ้นเป็นระยะๆ ในการวนซ้ำที่ค่อนข้างน้อย

ในการทดสอบบางอย่าง ความแตกต่างมีน้อยเพียงพอและอยู่ภายในขอบเขตของข้อผิดพลาดที่ถือว่าเทียบเท่ากันทางสถิติ

ตัวเลือกการกรองในตัวจัดการทำให้เจ็บ

แต่ผลลัพธ์ที่น่าประหลาดใจที่สุดคือการทดสอบเสริมครั้งที่สามที่แนะนำโดยหนึ่งในผู้แสดงความคิดเห็นข้างต้น ซึ่งนำ :has() ออกจากตัวเลือกและแทนที่ด้วยการตรวจสอบ .has() ในฟังก์ชันการโทรกลับ ซึ่งดำเนินการช้ากว่าการใช้ :has() ในตัวเลือกอย่างสม่ำเสมอ — บ่อยครั้ง 100 การดำเนินการต่อวินาทีหรือมากกว่า

นี่เป็นสิ่งที่ไม่สำคัญน้อยกว่าและน่าทึ่งเป็นพิเศษเมื่อพิจารณาว่า เอกสารประกอบ jQuery สำหรับ :has() ระบุว่าคุณควร คาดหวังประสิทธิภาพที่ดีขึ้นที่นี่:

เนื่องจาก :has() เป็นส่วนขยาย jQuery และไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS การสืบค้นที่ใช้ :has() จึงไม่สามารถใช้ประโยชน์จากการเพิ่มประสิทธิภาพที่ได้รับจากเมธอด DOM querySelectorAll() ดั้งเดิมได้ เพื่อประสิทธิภาพที่ดีขึ้นในเบราว์เซอร์สมัยใหม่ ให้ใช้ $( "your-pure-css-selector" ).has( selector/DOMElement ) แทน

ฉันไม่สงสัยเลยว่าในคำสั่งตัวเลือกที่ .has() ถูกใช้เพื่อลดชุดขององค์ประกอบที่ตรงกัน เราอาจคาดหวังประสิทธิภาพที่ดีขึ้นได้ แต่ฉันสงสัยว่าประสิทธิภาพที่ลดลงแสดงให้เห็นในการทดสอบเป็นผลมาจากการทำลายแบบแผนนั้นโดยการย้ายการตรวจสอบ .has() ไปยังตัวจัดการเหตุการณ์ซึ่งมีการส่งข้อมูลเหตุการณ์ไปรอบ ๆ วัตถุ jQuery ใหม่กำลังถูกสร้างขึ้นจาก this และ .length กำลังถูกเข้าถึงและ ตรวจสอบในคำสั่ง if

สูตรทดสอบ

ในการกำหนดการทดสอบ เกณฑ์มาตรฐานการเชื่อมโยงเหตุการณ์สามรายการได้รับการกำหนดค่าและนำไปใช้กับมาร์กอัป HTML เดียวกัน จากนั้นจึงใช้กรณีทดสอบการทริกเกอร์เหตุการณ์เดียวกัน — จำลองผู้ใช้วางเมาส์เหนือองค์ประกอบต่างๆ ที่ได้รับมอบสิทธิ์และไม่ได้รับมอบสิทธิ์บนหน้าจอ — ถูกนำไปใช้กับแต่ละรายการ เกณฑ์มาตรฐานสามประการสำหรับการเปรียบเทียบ

เกณฑ์มาตรฐาน 1:

    $('.foo').on('mouseenter', ':has(.other)', function(e) {
      console.log(e);
    });

เกณฑ์มาตรฐาน 2:

    $('.foo').on('mouseenter', 'button:has(.other)', function(e) {
      console.log(e);
    });

เกณฑ์มาตรฐาน 3:

    $('.foo').on('mouseenter', 'button', function(e) {
      if ($(this).has('.other').length) {
        console.log(e);
      }
    });

HTML:

<div class="foo">
    <button type="button" id="A">some text</button>
    <button type="button" id="B"><span class="other">some text</span></button>
    <div id="C">some text</div>
</div>

กรณีทดสอบ:

$('#A').trigger('mouseenter');
$('#B').trigger('mouseenter');
$('#C').trigger('mouseenter');