Mutasyon etkinliklerinin desteğinin sonlandırıldığını ve planlı olarak kaldırılacağını duyuruyoruz. Ayrıca, Temmuz 2024'te kaldırılmadan önce kodunuzu nasıl taşıyabileceğinizi paylaşıyoruz.

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 tarayıcıdan kaldırılmadan önce taşıma işlemi için 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
• (Modern tarayıcılar 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 etkinliklerinin 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.
• Etkinlik yayma nedeniyle ve birçok UA çalışma zamanında optimizasyonunu engelledikleri için yavaştır.
• Bu tür 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 etkinlikler web platformunu yavaşlatıyor. Web geliştikçe ve yeni API'ler eklendikçe bu eski API'lerin varlığı dikkate alınmalıdır. Bazen yalnızca bu etkinliklerin desteklenmesi gerektiği için yeni API'lerin önerilmesini engelleyebilir. Ö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 etkinlikleri kullanılmayan sayfalarda performans cezalarını önlemeye çalışan optimizasyonlarına rağmen işler 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 polyfill 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. 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.