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 etkinliklerine resmi olarak son verdi ve 23 Temmuz 2024'te kararlı sürüme giden 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
• (Hiçbir modern tarayıcı tarafından desteklenmez) DOMAttrModified
• (Hiçbir modern tarayıcı tarafından desteklenmez) DOMAttributeNameChanged
• (Hiçbir modern tarayıcı tarafından desteklenmez) DOMElementNameChanged

DOM düzey 2 spesifikasyonunun çok eski bir parçası olan bu etkinlikler 2011'den beri kullanımdan kaldırılmıştır. Bunların yerine, 2013'ten beri tüm modern tarayıcılarda desteklenen MutationObserver arayüzü kullanılmaya başlandı.

Mutasyon olaylarının geçmişi

Mutasyon olayları, uzun zaman önce iyi bir fikir gibi görünüyordu ancak çeşitli ölümcül kusurları olduğu ortaya çıktı:

• Bu öğeler ayrıntılıdır ve çok sık etkinleşir. 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.
• Bunlar genellikle kilitlenmelere neden olur. Etkinlik işleyiciler, çalışan bir DOM işlemi altındaki tüm DOM'yi değiştirebildiğinden, tarayıcılardaki birçok kilitlenmenin ve güvenlik hatasının kaynağı olmuştur.

Bu kusurlar nedeniyle etkinlikler 2011'de spesifikasyona göre kullanımdan kaldırıldı ve 2012'de bunların yerini alacak API (MutationObserver) oluşturuldu. 10 yılı aşkın süredir kullanılan yeni API, günümüzde uygulanmaya devam ediyor.

Mutasyon etkinlikleri neden kaldırılıyor?

Mutasyon etkinlikleri için destek, tarayıcılar arasında farklılık gösterir. DOMNodeInsertedIntoDocument ve DOMNodeRemovedFromDocument gibi bazı etkinlikler tüm tarayıcılarda desteklenmez. Diğer etkinlikler için söz konusu davranış, üzerinde anlaşılan spesifikasyonların eksik olması nedeniyle farklılık gösterir. Ancak, şu akla makul bir soru gelebilir: "bitti" olduğu için neden onları orada bırakmayın? Yalnızca bunları kullanan sayfaları yavaşlatıyorlar mı? Bu sorunun 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ığı da dikkate alınmalıdır. Bazen yalnızca bu etkinliklerin desteklenmesine ihtiyaç duyulması, yeni API'lerin önerilmesini önleyebilir. Örneğin, DOM içinde taşındıklarında <iframe> öğelerinin yeniden yüklenmesinin engellenmesi için uzun süredir devam eden bir istek var. Bununla birlikte, kısmen mutasyon olaylarının varlığı nedeniyle bu çabanın gerçekleştirilmesi çok zor bulunmuştur ve istek reddedilmiştir.

Bu etkinlikler, tarayıcıları hızlandırmaya engel olmaya devam ediyor. Tarayıcıların mutasyon etkinliği kullanmayan sayfalara yönelik performans cezalarından kaçınmaya çalışan optimizasyonları bile mükemmel değildir. Mutasyon etkinliği dinleyicileri için hâlâ birçok yerde kontrollerin yapılması gerekmektedir. Bu olaylar DOM'yi şaşırtıcı şekillerde değiştirebileceğinden, kodun yine de çok savunmacı olması gerekir.

Etkinliklerin resmi olarak kullanımdan kaldırılmasının üzerinden 10 yıldan fazla zaman geçtiğinden ve benzer şekilde, yeni API 10 yılı aşkın bir süredir kullanımda olduğundan, mutasyon etkinliklerini son olarak tarayıcılardan tamamen kaldırmanın zamanı geldi.

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

Bunun yerine MutationObserver politikasını kullanın

MutationObserver ile ilgili belgeler MDN'de yer alır ve oldukça eksiksizdir. Kod tabanınızın değiştirilmesi, bu etkinliklerin nasıl kullanıldığına bağlıdır. Ancak ö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 işleyici kodundan daha büyük görünse de etkinlik işleyiciye birden fazla çağrı gerektirmek yerine, tek bir çağrıda bir ağacın tamamında gerçekleşen tüm değişiklikleri işleyebildiğine dikkat edin.

Çoklu Dolgu

MutationObserver tarafından desteklenirken mevcut kodun çalışmaya devam etmesine izin vermeye çalışan bir çoklu dolgu var. Polyfill, 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ğin sonlandırılmasıyla ilgili deneme bilgileri

Mutasyon etkinlikleri, tüm kullanıcılar için Chrome 127'den kaldırılacak.* 23 Temmuz 2024'te kararlı sürüme geçilecektir. Erken uyarı olarak etkinlikler bu tarihten önce Canary, Yeni geliştirilenler ve Beta kanallarından kaldırılmaya başlanacak.

• Kodunuzu taşımak için ek zamana ihtiyacınız varsa (Temmuz 2024'ten sonra) belirtilen sitelerde etkinlikleri geçici olarak yeniden etkinleştiren bir kullanımdan kaldırma denemesi gerçekleştirebilirsiniz. Ayrıca kurumsal kullanıcılar için benzer şekilde çalışan MutationEventsEnabled adlı bir Kurumsal Politika da vardır. Bu seçeneklerin her ikisi de, gerekirse taşıma işlemi için yaklaşık dokuz aylık ek süre sağlar.