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

Mason Freed

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

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

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

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

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

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