Mutasyon etkinliklerinin desteğinin sonlandırılacağını ve planlı olarak kaldırılacağını ve Temmuz 2024'teki kaldırma işleminden önce kodunuzu nasıl taşıyabileceğinizi duyurduk.

Mason Freed

Chromium, mutasyon etkinliklerinin desteğini resmen sonlandırdı ve 23 Temmuz 2024'te kararlı sürüm olarak kullanıma sunulacak olan 127 sürümünden itibaren desteği kaldırmayı planlıyor. Bu yayında, mutasyon etkinliklerini neden kaldırdığımız açıklanmakta ve mutasyon etkinliklerinin tarayıcıdan kaldırılmadan önce kullanılabilecek bir yol sunulmaktadır.

Mutasyon etkinlikleri nedir?

Mutasyon etkinlikleri, aşağıdaki etkinlik koleksiyonunun adıdır:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (Modern tarayıcılar tarafından desteklenmez) DOMAttrModified
• (Hiçbir modern tarayıcı tarafından desteklenmez) DOMAttributeNameChanged
• (Modern tarayıcılar tarafından desteklenmez) DOMElementNameChanged

Bu etkinlikler, DOM 2. seviye spesifikasyonunun çok eski bir parçasıdır ve 2011'den beri desteği sonlandırılmıştır. Bu API'ler, 2013'ten beri tüm modern tarayıcılarda desteklenen MutationObserver arayüzü ile değiştirildi.

Mutasyon etkinlikleri geçmişi

Mutasyon etkinlikleri uzun zaman önce iyi bir fikir gibi görünse de birçok ölümcül kusurları olduğu ortaya çıktı:

• Çok fazla kelime kullanırlar ve çok sık tetiklenirler. Kaldırılan her düğüm için bir etkinlik tetiklenir.
• Bunlar, etkinlik yayılımı ve birçok UA çalışma zamanı optimizasyonunu engelledikleri için yavaştır.
• Bu uygulamalar genellikle kilitlenmelere neden olur. Etkinlik işleyicileri, çalışan bir DOM işleminin altındaki DOM'un tamamını değiştirebildiğinden tarayıcılarda birçok kilitlenmenin ve güvenlik hatasının kaynağı olmuştur.

Bu kusurlar nedeniyle etkinlikler, 2011'de spesifikasyondan desteklenmeyi bıraktı ve 2012'de yerine yeni bir API (MutationObserver) oluşturuldu. Yeni API, şu anda 10 yıldan uzun bir süredir uygulanmakta ve kullanılmaktadır.

Mutasyon etkinlikleri neden kaldırılıyor?

Mutasyon etkinlikleri için destek, tarayıcılara göre değişiklik gösterir. DOMNodeInsertedIntoDocument ve DOMNodeRemovedFromDocument gibi bazı etkinlikler tüm tarayıcılarda desteklenmez. Diğer etkinliklerde, üzerinde anlaşmaya varılmış bir spesifikasyon olmadığından belirli davranış değişir. Ancak şu soru akla gelebilir: "Bitmiş" oldukları ve yalnızca onları kullanan sayfaları yavaşlattığı için neden orada bırakılmalarına izin veriliyor? Yanıt iki bölümden oluşur.

Öncelikle, bu tür etkinlikler web platformunu sınırlandırıyor. Web geliştikçe ve yeni API'ler eklendikçe bu eski API'lerin varlığı dikkate alınmalıdır. Bazen yeni API'lerin önerilmemesinin nedeni yalnızca bu etkinliklerin desteklenmesi gerekmesidir. Örneğin, DOM içinde taşınan <iframe> öğelerinin yeniden yüklenmesini önlemek için uzun zamandır bir istek vardı. Ancak kısmen mutasyon etkinliklerinin varlığı nedeniyle bu çabanın gerçekleştirilmesinin çok zor olduğu kabul edildi ve istek kapatıldı.

Bu etkinlikler, tarayıcıların daha hızlı hale getirilmesini engellemeye devam ediyor. Tarayıcıların mutasyon etkinliği kullanmayan sayfalara yönelik performans cezalarından kaçınmaya çalışan optimizasyonlar yapılsa bile hiçbir şey mükemmel değildir. Mutasyon etkinliği dinleyicileri için birçok yerde hâlâ kontrol yapılması gerekiyor. Bu etkinlikler DOM'u şaşırtıcı şekillerde değiştirebileceğinden kodun yine de çok savunmalı bir şekilde yazılması gerekir.

Etkinliklerin desteğinin resmi olarak sonlandırılmasının üzerinden 10 yıldan fazla zaman geçtiği ve değişim API'sinin de benzer şekilde 10 yıldan uzun süredir kullanılabildiği için mutasyon etkinliklerini tarayıcılardan kalıcı olarak kaldırmanın zamanı geldi.

Taşıma işlemi nasıl yapılır?

Bunun yerine MutationObserver kullanın

MutationObserver ile ilgili dokümanlar MDN'de yer alır ve oldukça kapsamlıdır. Kod tabanınızın değiştirilmesi, bu etkinliklerin nasıl kullanıldığına bağlıdır. Örnek olarak:

// 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 kodu, orijinal DOMNodeInserted etkinlik dinleyici kodundan daha büyük görünse de etkinlik işleyiciye birden fazla çağrı yapılmasını gerektirmek yerine, bir ağacın tamamında gerçekleşen tüm mutasyonları tek bir çağrıda işleyebileceğini unutmayın.

Çoklu dolgu

MutationObserver tarafından desteklenirken mevcut kodun çalışmaya devam etmesine izin vermeye çalışan bir çoklu dolgu var. Polifill, GitHub'da veya npm paketi olarak bulunur.

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

Zaman çizelgesi ve desteği sonlandırılan deneme sürümüyle ilgili bilgiler

Mutasyon etkinlikleri, 23 Temmuz 2024'te kararlı sürüme geçecek olan tüm kullanıcılar* için Chrome 127'den kaldırılacak. Etkinlikler, erken uyarı olarak Canary, Dev ve Beta kanallarından daha önce kaldırılmaya başlayacak.

• Kodunuzu taşımak için Temmuz 2024'ten sonra ek zamana ihtiyacınız varsa etkinlikleri belirtilen sitelerde geçici olarak yeniden etkinleştiren bir Destek Sonu Deneme Sürümü vardır. Ayrıca kurumsal kullanıcılar için benzer şekilde çalışan MutationEventsEnabled adlı bir Kurumsal Politika da vardır. Bu seçeneklerden herhangi biri, gerekirse taşıma işlemi için yaklaşık dokuz ay daha ek süre tanır.