Ogłosimy wycofanie i planowane usunięcie zdarzeń mutacji oraz informacje o sposobie migracji kodu przed jego usunięciem w lipcu 2024 r.
Chromium oficjalnie wycofał zdarzenia mutacji i planuje usunięcie obsługi od wersji 127, która trafi do wersji stabilnej 23 lipca 2024 roku. W tym poście wyjaśniamy, dlaczego usuwamy zdarzenia mutacji i przedstawiamy ścieżkę migracji, zanim zostaną one usunięte z przeglądarki.
Czym są zdarzenia mutacji?
Zdarzenia mutacji to nazwa tego zbioru zdarzeń:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (Nieobsługiwana w żadnej nowoczesnej przeglądarce)
DOMAttrModified - (Nieobsługiwana w żadnej nowoczesnej przeglądarce)
DOMAttributeNameChanged - (Nieobsługiwana w żadnej nowoczesnej przeglądarce)
DOMElementNameChanged
Te zdarzenia stanowią bardzo starą część specyfikacji DOM na poziomie 2 i zostały wycofane od 2011 roku. Zastąpiliśmy je interfejsem MutationObserver, który jest obsługiwany we wszystkich nowoczesnych przeglądarkach od 2013 roku.
Historia zdarzeń mutacji
Mutacje dawno wydawały się dobrym pomysłem, ale okazało się, że mają kilka śmiertelnych wad:
- Są one szczegółowe i zbyt często się uruchamiają. W przypadku każdego usuniętego węzła jest wywoływane zdarzenie.
- Są one wolne z powodu propagacji zdarzeń i uniemożliwiania wielu optymalizacji w czasie działania UA.
- Często powodują awarie. Stały się źródłem wielu awarii i błędów związanych z bezpieczeństwem w przeglądarkach, ponieważ detektory zdarzeń mogą zmieniać cały DOM w ramach uruchomionej operacji DOM.
Z powodu tych wad zdarzenia te zostały wycofane ze specyfikacji w 2011 roku, a w 2012 r. utworzono zastępczy interfejs API (MutationObserver). Nowy interfejs API został do tej pory wdrożony i działa od ponad 10 lat.
Dlaczego zdarzenia mutacji są usuwane
Obsługa zdarzeń mutacji różni się w zależności od przeglądarki. Niektóre zdarzenia, na przykład DOMNodeInsertedIntoDocument i DOMNodeRemovedFromDocument, nie są obsługiwane we wszystkich przeglądarkach. W przypadku pozostałych zdarzeń działanie funkcji różni się z powodu braku uzgodnionej specyfikacji. Można sobie jednak zastanowić się, dlaczego nie warto ich tam zostawić, skoro są one „gotowe” i spowalniają tylko strony, które z nich korzystają. Odpowiedź składa się z 2 części.
Po pierwsze, te zdarzenia spowalniają działanie platformy internetowej. W miarę rozwoju sieci i dodawania nowych interfejsów API należy brać pod uwagę istnienie starszych wersji interfejsów. Czasami sama potrzeba obsługi tych zdarzeń może uniemożliwić proponowanie nowych interfejsów API. Jednym z przykładów jest żądanie od dłuższego czasu mające na celu zapobieganie przeładowywaniu elementów <iframe> po przeniesieniu ich w obrębie DOM. Jednak częściowo ze względu na istnienie zdarzeń mutacji uznano, że wysiłek ten był zbyt trudny do wykonania i żądanie zostało zamknięte.
Te zdarzenia nadal utrudniają przyspieszanie przeglądarek. Nie wszystko działa idealnie, nawet w przypadku optymalizacji stosowanych w przeglądarkach, które starają się uniknąć kar za działanie na stronach, które nie wykorzystują zdarzeń mutacji. Detektor zdarzeń mutacji nadal wymaga weryfikacji w wielu miejscach. Kod w dalszym ciągu trzeba pisać bardzo defensywnie, ponieważ takie zdarzenia mogą w zaskakujący sposób zmieniać DOM.
Ponieważ zdarzenia zostały oficjalnie wycofane ponad 10 lat, a nowy interfejs API jest dostępny już od ponad 10 lat, nadszedł czas, aby raz na zawsze usunąć zdarzenia mutacji z przeglądarek.
Przeprowadzanie migracji
Użyj w zamian zasady MutationObserver
Dokumentacja usługi MutationObserver znajduje się na stronie MDN i jest dość kompletna. Zastąpienie bazy kodu zależy od tego, jak są używane te zdarzenia, ale na przykład:
// 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});
Chociaż kod MutationObserver wydaje się większy niż oryginalny kod detektora zdarzeń DOMNodeInserted, można zauważyć, że w jednym wywołaniu obsługuje on wszystkie mutacje, które wystąpiły w całym drzewie, i nie wymaga wielu wywołań modułu obsługi zdarzeń.
Włókno poliestrowe
Jest używany kod polyfill oparty na MutationObserver, który próbuje umożliwić dalsze działanie istniejącego kodu. Plik polyfill znajduje się na GitHubie lub jako pakiet npm.
- https://github.com/mfreed7/mutation-events-polyfill#readme
- https://www.npmjs.com/package/mutation-events
Harmonogram i informacje o okresie próbnym wycofywania
Zdarzenia mutacji zostaną usunięte z Chrome 127 u wszystkich użytkowników*, a 23 lipca 2024 r. rozpocznie się wersja stabilna. W ramach wczesnego ostrzegania zaczniemy usuwać takie wydarzenia z kanałów wersji Canary, deweloperskiej i beta.
- Jeśli potrzebujesz więcej czasu (po upływie lipca 2024 roku) na migrację kodu, możesz skorzystać z okresu próbnego na wycofanie, który tymczasowo ponownie włącza wydarzenia w określonych witrynach. Istnieje też zasada przedsiębiorstwa o nazwie
MutationEventsEnabled, która działa w podobny sposób w przypadku użytkowników firmowych. Każda z tych opcji zapewnia w razie potrzeby około 9 miesięcy dodatkowego czasu na migrację.