Değişiklik etkinliklerinin kullanımdan kaldırılması ve bunların planlı olarak kaldırılmasıyla ilgili duyuru ve Temmuz 2024'teki kaldırma işleminden önce kodunuzu nasıl taşıyabileceğiniz açıklanacak.

Mason Freed

Chromium'da mutasyon olaylarının resmi olarak desteği sonlandırıldı. 127 sürümünden itibaren desteği kaldırmayı planlıyoruz. Bu sürüm, 23 Temmuz 2024'te kararlı sürüm olarak kullanıma sunulacak. Bu yayında, mutasyon etkinliklerini neden kaldırdığımız ve tarayıcıdan kaldırılmadan önce taşıma işlemi için bir yol sunulmaktadır.

Mutasyon olayları nedir?

Dönüşüm etkinlikleri, aşağıdaki etkinlik koleksiyonunun adıdır:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (Modern tarayıcılarda desteklenmez) DOMAttrModified
• (Modern tarayıcılarda desteklenmez) DOMAttributeNameChanged
• (Modern tarayıcılarda 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ü gelir.

Mutasyon olaylarının geçmişi

Mutasyon olayları uzun zaman önce kulağa iyi fikirmiş gibi geliyordu ancak önemle sonuçlanan birkaç kusur olduğu ortaya çıktı:

• Bunlar çok ayrıntılı ve çok sık tetikleniyor. Kaldırılan her düğüm için bir etkinlik tetiklenir.
• Etkinlik yayılımı nedeniyle ve birçok UA çalışma zamanı optimizasyonunu önledikleri için yavaştırlar.
• Bunlar sıklıkla kilitlenmelere neden olur. Etkinlik dinleyicileri çalışan bir DOM işleminin altında tüm DOM'u değiştirebildiği için tarayıcılardaki birçok kilitlenme ve güvenlik hatasının kaynağı olmuştur.

Bu kusurlar nedeniyle, etkinlikler 2011'de spesifikasyondan kullanımdan kaldırılmış ve 2012'de bunların yerini alacak API (MutationObserver) geliştirilmiştir. Yeni API şu an için 10 yıldan uzun bir süredir uygulanmakta ve işler durumda.

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 etkinlikler için belirli davranış, üzerinde anlaşılan herhangi bir spesifikasyonun olmaması nedeniyle değişiklik gösterir. Ancak makul bir soru şu olabilir: "bitti" oldukları ve yalnızca bunları kullanan sayfaları yavaşlattıkları için, onları neden orada bırakmıyorsunuz? Yanıt iki bölümden oluşuyor.

Öncelikle bu etkinlikler web platformunu bekletiyor. Web geliştikçe ve yeni API'ler eklendikçe bu eski API'lerin varlığı dikkate alınmalıdır. Bazen sadece bu etkinliklerin desteklenmesi ihtiyacı, yeni API'lerin teklif edilmesini engelleyebilir. Örneğin, <iframe> öğelerinin DOM içinde taşındıklarında yeniden yüklenmesinin önlenmesine yönelik uzun süreli bir istek bulunmaktadır. Ancak kısmen mutasyon olaylarının varlığından dolayı, bu çabayı gerçekleştirmenin çok zor olduğu kabul edildi ve istek kapatıldı.

Bu olaylar, tarayıcıların daha hızlı çalışmasını engellemeye devam ediyor. Dönüşüm etkinliklerinin kullanılmadığı sayfalarda performans cezalarından kaçınmaya çalışan tarayıcıların yaptığı optimizasyonlarda bile, her şey mükemmel değildir. Mutasyon Etkinliği dinleyicileri için hâlâ birçok yerde kontrollerin yapılması gerekiyor. Bu olaylar DOM'u şaşırtıcı şekillerde değiştirebileceği için kodun hâlâ son derece savunmaya dayalı bir şekilde yazılması gerekir.

Etkinliklerin resmi olarak kullanımdan kaldırılmasından bu yana 10 yıldan uzun bir süre geçtiği ve değişim API'sı benzer şekilde 10 yıldan uzun bir süredir kullanımda olduğundan nihayet tarayıcılarda mutasyon olaylarının kesin olarak kaldırılmasının zamanı geldi.

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

Bunun yerine MutationObserver kullanın

MutationObserver dokümanları MDN'de bulunmaktadır ve tamamen 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 bir çağrıda, bir çağrıda tüm ağacın tamamında gerçekleşen tüm mutasyonları işleyebileceğine, etkinlik işleyiciye birden fazla çağrı yapılmasına gerek olmadığına dikkat edin.

Polyester Lifi

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

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

Zaman çizelgesi ve kullanımdan kaldırmayla ilgili deneme sürümü bilgileri

Dönüşüm etkinlikleri tüm kullanıcılar için Chrome 127'den kaldırılacak*, ancak 23 Temmuz 2024'te kararlı sürüme geçirilecek. Erken uyarı olarak, etkinlikler bundan önce Canary, Yeni geliştirilenler ve beta kanallarından kaldırılmaya başlayacak.

• Kodunuzu taşımak için ek zamana ihtiyacınız varsa (Temmuz 2024'ten sonra) belirli sitelerdeki etkinlikleri geçici olarak yeniden etkinleştiren bir Kullanımdan Kaldırma Denemesi bulunmaktadır. Ayrıca kurumsal kullanıcılar için benzer şekilde çalışan, MutationEventsEnabled adında bir Kurumsal Politika vardır. Bu seçeneklerin her ikisi de, gerektiğinde taşıma işlemi için yaklaşık dokuz aylık ek süre sağlar.