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

אנחנו מודיעים על ההוצאה משימוש ועל ההסרה המתוכננת של אירועי 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, וב-2012 נוצר ממשק API חלופי (MutationObserver). ה-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 חודשים נוספים לביצוע ההעברה, אם יש צורך.