ระบบจะนำเหตุการณ์การเปลี่ยนแปลงออกจาก Chrome

ประกาศเกี่ยวกับการเลิกใช้งานและการนำ Mutation Event ออกตามแผนที่วางไว้ รวมถึงอธิบายวิธีย้ายข้อมูลโค้ดก่อนที่จะนำออกในเดือนกรกฎาคม 2024

Mason Freed

Chromium ได้เลิกใช้งาน Mutation Event อย่างเป็นทางการแล้ว และมีแผนที่จะเลิกรองรับเวอร์ชัน 127 เป็นต้นไป ซึ่งจะเป็นเวอร์ชันเสถียรในวันที่ 23 กรกฎาคม 2024 โพสต์นี้จะอธิบายสาเหตุที่เรานํา Mutation Event ออกและบอกเส้นทางในการย้ายข้อมูลก่อนที่จะถูกนำออกจากเบราว์เซอร์

Mutation Event คืออะไร

Mutation Event เป็นชื่อสำหรับคอลเล็กชันเหตุการณ์ต่อไปนี้

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (ไม่รองรับโดยเบราว์เซอร์รุ่นใหม่) DOMAttrModified
• (ไม่รองรับโดยเบราว์เซอร์รุ่นใหม่) DOMAttributeNameChanged
• (ไม่รองรับโดยเบราว์เซอร์รุ่นใหม่) DOMElementNameChanged

เหตุการณ์เหล่านี้เป็นส่วนที่เก่ามากของข้อกำหนด DOM ระดับ 2 และได้เลิกใช้งานมาตั้งแต่ปี 2011 โดยใช้อินเทอร์เฟซ MutationObserver แทน ซึ่งรองรับในเบราว์เซอร์รุ่นใหม่ทั้งหมดตั้งแต่ปี 2013

ประวัติของเหตุการณ์การเปลี่ยนแปลง

Mutation Event ดูเหมือนจะเป็นแนวคิดที่ดีเมื่อนานมาแล้ว แต่กลับมีข้อบกพร่องร้ายแรงหลายอย่าง เช่น

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

ด้วยเหตุนี้ เหตุการณ์จึงเลิกใช้งานจากข้อกำหนดในปี 2011 และ API ทดแทน (MutationObserver) สร้างขึ้นในปี 2012 ปัจจุบัน API ใหม่มีการใช้งานและทํางานมานานกว่า 10 ปีแล้ว

ทำไม Mutation Event จึงถูกนำออก

การรองรับ Mutation Event จะแตกต่างกันไปในแต่ละเบราว์เซอร์ บางเหตุการณ์ เช่น DOMNodeInsertedIntoDocument และ DOMNodeRemovedFromDocument อาจไม่รองรับในบางเบราว์เซอร์ สำหรับเหตุการณ์อื่นๆ ลักษณะการทำงานบางอย่างจะแตกต่างกันไปเนื่องจากไม่มีข้อกำหนดที่ตกลงกันไว้ แต่คำถามที่สมเหตุสมผลก็คือ ทำไมไม่ปล่อยพวกเขาไว้เฉยๆ ก็เพราะ "เสร็จแล้ว" นั่นเอง และทำให้หน้าเว็บที่ใช้งานช้าลงเท่านั้น คำตอบแบ่งออกเป็น 2 ส่วน

ประการแรก เหตุการณ์เหล่านี้ทำให้แพลตฟอร์มเว็บหยุดนิ่ง ขณะที่เว็บมีการพัฒนาและมีการเพิ่ม API ใหม่ จึงต้องพิจารณาถึงการมีอยู่ของ API เดิมเหล่านี้ บางครั้ง ความต้องการรองรับเหตุการณ์เหล่านี้อาจทำให้ระบบเสนอ API ใหม่ไม่ได้ ตัวอย่างเช่น มีคำขอที่มีมาเป็นเวลานานเพื่อป้องกันไม่ให้องค์ประกอบ <iframe> โหลดซ้ำเมื่อย้ายภายใน DOM อย่างไรก็ตาม มีบางส่วนเกิดขึ้นเนื่องจากมีเหตุการณ์การกลายพันธุ์อยู่ ความพยายามดังกล่าวจึงถือว่ายากเกินไป จึงได้ปิดคำขอดังกล่าว

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

และเนื่องจากเหตุการณ์เลิกใช้งานอย่างเป็นทางการเป็นเวลากว่า 10 ปีแล้ว และ API ทดแทนดังกล่าวก็เปิดใช้งานมานานกว่า 10 ปีแล้ว จึงถึงเวลาแล้วที่เราจะนำเหตุการณ์การเปลี่ยนแปลงออกจากเบราว์เซอร์เพียงครั้งเดียวและทั้งหมด

วิธีย้ายข้อมูล

ใช้ MutationObserver แทน

เอกสารประกอบสำหรับ MutationObserver อยู่ใน MDN และค่อนข้างครบถ้วนสมบูรณ์ การแทนที่ฐานโค้ดจะขึ้นอยู่กับวิธีใช้เหตุการณ์เหล่านี้ แต่เป็นตัวอย่าง

// Old mutation event usage:  
target.addEventListener('DOMNodeInserted',event => doSomething(event.target));

// Replacement mutation observer code:  
const observer = new MutationObserver(mutationList =>  
  mutationList.filter(m => m.type === 'childList').forEach(m => {  
    m.addedNodes.forEach(doSomething);  
  }));  
observer.observe(target,{childList: true, subtree: true});  

แม้ว่าโค้ด MutationObserver จะมีขนาดใหญ่กว่าโค้ด Listener เหตุการณ์ DOMNodeInserted เดิม แต่ให้สังเกตเห็นว่าโค้ดจัดการการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นในโครงสร้างทั้งหมดได้ในการเรียกครั้งเดียว แทนที่จะต้องเรียกหลายครั้งไปยังเครื่องจัดการเหตุการณ์

ใยโพลีเอสเตอร์

มี Polyfill ที่พยายามให้โค้ดที่มีอยู่ทำงานต่อไปได้ในขณะที่ขับเคลื่อนโดย MutationObserver polyfill อยู่ใน GitHub หรือเป็นแพ็กเกจ npm

• https://github.com/mfreed7/mutation-events-polyfill#readme
• https://www.npmjs.com/package/mutation-events

ไทม์ไลน์และข้อมูลช่วงทดลองใช้การเลิกใช้งาน

ระบบจะนำ Mutation Event ออกจาก Chrome 127 สำหรับผู้ใช้ทุกคน* ซึ่งจะเปลี่ยนเป็นรุ่นเสถียรในวันที่ 23 กรกฎาคม 2024 เราจะเริ่มนำเหตุการณ์ดังกล่าวออกจากเวอร์ชัน Canary, กำลังพัฒนา และเวอร์ชันเบต้าก่อนหน้านั้น เพื่อเป็นคำเตือนล่วงหน้า

• หากต้องการเวลาเพิ่มเติม (หลังเดือนกรกฎาคม 2024) ในการย้ายข้อมูลโค้ด เรามีการทดลองใช้การเลิกใช้งานที่จะเปิดใช้เหตุการณ์อีกครั้งเป็นการชั่วคราวในเว็บไซต์ที่ระบุ นอกจากนี้ยังมี Enterprise Policy ที่เรียกว่า MutationEventsEnabled ซึ่งทำงานในลักษณะเดียวกันสำหรับผู้ใช้ระดับองค์กรด้วย ตัวเลือกทั้ง 2 อย่างนี้ทำให้มีเวลาในการย้ายข้อมูลเพิ่มขึ้นประมาณ 9 เดือน หากจำเป็น