אירועי מוטציה יוסרו מ-Chrome

הודעה על ההוצאה משימוש ועל הסרה מתוכננת של אירועי מוטציה, והסבר איך אפשר להעביר את הקוד לפני ההסרה ביולי 2024.

Mason Freed

ב-Chromium הוציאו משימוש אירועי מוטציה באופן רשמי, ואנחנו מתכננים להסיר את התמיכה החל מגרסה 127, שתושק בגרסה היציבה ב-23 ביולי 2024. בפוסט הזה מוסבר למה אנחנו מסירים אירועי מוטציה, ומוצגים נתיב להעברה לפני הסרתם מהדפדפן.

מהם אירועי מוטציה?

אירועי מוטציה הוא השם של אוסף האירועים הבא:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (לא נתמך באף דפדפן מודרני) DOMAttrModified
• (לא נתמך באף דפדפן מודרני) DOMAttributeNameChanged
• (לא נתמך באף דפדפן מודרני) DOMElementNameChanged

האירועים האלה הם חלק ישן מאוד במפרט של רמת DOM 2, והם הוצאו משימוש מאז 2011. הם הוחלפו בממשק MutationObserver, שנתמך בכל הדפדפנים המודרניים מאז 2013.

ההיסטוריה של אירועי מוטציה

לפני זמן רב נראה שאירועי מוטציה נשמעו כמו רעיון טוב, אבל התברר שהיו בהם כמה פגמים קטלניים:

• הם רחבים מדי ופועלים יותר מדי פעמים. אירוע מופעל בכל צומת שהוסר.
• הם איטיים בגלל הפצת אירועים ובגלל שהם מונעים אופטימיזציות רבות בזמן הריצה ב-UA.
• הם גורמים לקריסות לעיתים קרובות. הן היו המקור לקריסות רבות ולבאגי אבטחה רבים בדפדפנים, כי פונקציות event listener יכולות לשנות את כל ה-DOM מתחת לפעולת DOM פועלת.

עקב הפגמים האלה, האירועים הוצאו משימוש מהמפרט ב-2011, וממשק API חלופי (MutationObserver) נוצר בשנת 2012. ה-API החדש הוטמע ופועל במשך יותר מ-10 שנים.

למה אירועי מוטציה מוסרים

התמיכה באירועי מוטציה משתנה בדפדפנים שונים. אירועים מסוימים, לדוגמה DOMNodeInsertedIntoDocument ו-DOMNodeRemovedFromDocument, לא נתמכים בכל הדפדפנים. לגבי שאר האירועים, ההתנהגות הספציפית משתנה כתוצאה מהיעדר מפרט מוסכם. עם זאת, שאלה סבירה יכולה להיות: למה לא להשאיר אותן שם, כי הן 'בוצע' והן רק מאטות את הדפים שמשתמשים בהן? התשובה מחולקת לשני חלקים.

קודם כול, האירועים האלה מעכבים את פלטפורמת האינטרנט. ככל שהאינטרנט מתפתח, וממשקי API חדשים נוספים, יש להביא בחשבון את הקיום של ממשקי ה-API מהדור הקודם. לפעמים הצורך רק בתמיכה באירועים האלה עלול למנוע הצעות לממשקי API חדשים. כדוגמה אחת, הייתה בקשה ארוכה למניעת טעינה מחדש של רכיבי <iframe> כשהם מועברים בתוך ה-DOM. עם זאת, חלקית בשל קיומם של אירועי מוטציה, נקבע כי המאמץ הזה קשה מדי לביצוע והבקשה נסגרה.

האירועים האלה עדיין מפריעות למהירות הדפדפן. גם עם האופטימיזציות שמבצעות דפדפנים, שמנסות למנוע את הסנקציות שמשפיעות על ביצועים בדפים שלא משתמשים בהם באירועי מוטציה, התוצאות לא מושלמות. עבור מאזינים של אירועי מוטציה, עדיין צריך לבצע בדיקות במקומות רבים. עדיין צריך לכתוב את הקוד עם הרבה הגנה, כי האירועים האלה עשויים לשנות את ה-DOM בדרכים מפתיעות.

מכיוון שעברו יותר מ-10 שנים מאז שהאירועים הוצאו משימוש באופן רשמי, וה-API החלופי היה זמין באופן דומה במשך יותר מ-10 שנים, הגיע הזמן סוף סוף להסיר את אירועי המוטציה מהדפדפנים אחת ולתמיד.

איך מבצעים העברה

שימוש ב-MutationObserver במקום זאת

התיעוד של MutationObserver נמצא ב-MDN והוא די מלא. ההחלפה של ה-codebase תלויה באופן השימוש באירועים האלה, אבל כדוגמה:

// 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 המקורי, אבל חשוב לשים לב שהוא יכול לטפל בכל המוטציות שמתרחשות בעץ שלם בקריאה אחת, במקום לחייב קריאות מרובות ל-handler של האירועים.

פוליפיל

קיים polyfill שמנסה לאפשר לקוד הקיים להמשיך לפעול בזמן שהוא מופעל על ידי MutationObserver. ה-Polyfill נמצא ב-GitHub או כחבילה של npm.

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

מידע על ציר הזמן ועל ההוצאה משימוש של תקופת הניסיון

אירועי מוטציה יוסרו מ-Chrome 127 אצל כל המשתמשים*, שיועברו לגרסה היציבה ב-23 ביולי 2024. האירועים האלה יוסרו מערוצי Canary, Dev ו-בטא מוקדם יותר, כאזהרה מוקדמת.

• אם דרוש לכם זמן נוסף (אחרי יולי 2024) כדי להעביר את הקוד, תוכלו להשתמש בתקופת ניסיון להוצאה משימוש, שמפעילה מחדש את האירועים באופן זמני באתרים מסוימים. יש גם מדיניות ארגונית בשם MutationEventsEnabled שפועלת באופן דומה למשתמשים בגרסה הארגונית. בכל אחת מהאפשרויות האלה ניתן לכם כ-9 חודשים נוספים כדי לבצע את ההעברה, במידת הצורך.