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

Mason Freed

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

מהם אירועי Mutation?

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

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

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

היסטוריית אירועי המוטציה

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

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

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

למה אירועי Mutation יוסרו

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

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

האירועים האלה ממשיכים להפריע לשיפור המהירות של הדפדפנים. גם עם האופטימיזציות של הדפדפנים, שמנסות למנוע את הפגיעה בביצועים בדפים שלא משתמשים באירועי מוטציה, המצב לא מושלם. עדיין צריך לבצע בדיקות במקומות רבים למאזינים של אירועי Mutation. עדיין צריך לכתוב קוד בצורה מגוננת מאוד, כי האירועים האלה יכולים לשנות את ה-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 נראה גדול יותר מהקוד המקורי של DOMNodeInserted למעקב אחרי אירועים, אבל חשוב לשים לב שהוא יכול לטפל בכל המוטציות שקורות בעץ שלם בקריאה אחת, במקום לדרוש כמה קריאות למטפל באירוע.

פוליפיל

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

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

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

אירועי Mutation יוסרו מ-Chrome 127 לכל המשתמשים*, שיועברו לגרסה היציבה ב-23 ביולי 2024. האירועים יתחילו להסיר מהערוצים Canary,‏ Dev ו-Beta לפני כן, כאות אזהרה מראש.

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