Mengumumkan penghentian penggunaan dan rencana penghapusan peristiwa mutasi, serta menyampaikan cara memigrasikan kode Anda sebelum penghapusan pada Juli 2024.

Mason Freed

Chromium secara resmi telah menghentikan penggunaan peristiwa mutasi, dan berencana untuk menghapus dukungan mulai versi 127, yang akan dirilis ke rilis stabil pada 23 Juli 2024. Postingan ini menjelaskan alasan kami menghapus peristiwa mutasi, dan memberikan jalur untuk melakukan migrasi sebelum dihapus dari browser.

Apa yang dimaksud dengan peristiwa mutasi?

Peristiwa mutasi adalah nama untuk kumpulan peristiwa berikut:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (Tidak didukung oleh browser modern apa pun) DOMAttrModified
• (Tidak didukung oleh browser modern apa pun) DOMAttributeNameChanged
• (Tidak didukung oleh browser modern apa pun) DOMElementNameChanged

Peristiwa ini adalah bagian yang sangat lama dari spesifikasi DOM level 2, dan tidak digunakan lagi sejak 2011. Antarmuka tersebut diganti dengan antarmuka MutationObserver, yang telah didukung di semua browser modern sejak 2013.

Histori peristiwa mutasi

Peristiwa mutasi sepertinya ide bagus dari masa lalu, tetapi ternyata memiliki beberapa kekurangan fatal:

• Panjangnya panjang dan terlalu sering menyala. Sebuah peristiwa diaktifkan untuk setiap node yang dihapus.
• Error lambat, karena penyebaran peristiwa dan karena mencegah banyak pengoptimalan waktu proses UA.
• Error sering kali menyebabkan error. Mereka telah menjadi sumber banyak error dan bug keamanan di browser, karena event pemroses bisa mengubah seluruh DOM di bawah operasi DOM yang sedang berjalan.

Karena cacat tersebut, peristiwa tersebut tidak digunakan lagi dari spesifikasi pada tahun 2011 dan API pengganti (MutationObserver) dibuat pada tahun 2012. API baru telah diimplementasikan dan berfungsi selama lebih dari 10 tahun hingga saat ini.

Alasan peristiwa mutasi dihapus

Dukungan untuk peristiwa mutasi bervariasi di berbagai browser. Beberapa peristiwa, misalnya DOMNodeInsertedIntoDocument dan DOMNodeRemovedFromDocument, tidak didukung di semua browser. Untuk peristiwa lainnya, perilaku tertentu bervariasi karena tidak adanya spesifikasi yang disetujui. Namun, pertanyaan yang masuk akal mungkin: mengapa tidak ditinggalkan saja, karena sudah "selesai" dan mereka hanya memperlambat halaman yang menggunakannya? Jawabannya ada dalam dua bagian.

Pertama, peristiwa semacam ini menghambat platform web. Seiring berkembangnya web, dan API baru ditambahkan, keberadaan API lama ini harus diperhitungkan. Terkadang, hanya dengan perlu mendukung peristiwa ini, API baru mungkin tidak akan dapat diajukan. Sebagai salah satu contohnya, ada permintaan yang sudah lama untuk mencegah elemen <iframe> dimuat ulang saat dipindahkan dalam DOM. Namun, sebagian karena adanya peristiwa mutasi, upaya tersebut dianggap terlalu sulit untuk dicapai, dan permintaan ditutup.

Peristiwa ini terus menghalangi browser untuk lebih cepat. Bahkan dengan pengoptimalan yang dimiliki browser, yang berupaya menghindari penalti performa pada halaman yang tidak menggunakan peristiwa mutasi, segalanya masih belum sempurna. Pemeriksaan masih perlu dilakukan di banyak tempat untuk pemroses Peristiwa Mutasi. Kode masih harus ditulis dengan sangat defensif, karena peristiwa ini bisa mengubah DOM dengan cara yang mengejutkan.

Karena sudah lebih dari 10 tahun sejak peristiwa tersebut secara resmi tidak digunakan lagi, dan API pengganti juga telah tersedia selama lebih dari 10 tahun, sekarang saatnya untuk menghapus peristiwa mutasi dari browser selamanya.

Cara melakukan migrasi

Sebagai gantinya, gunakan MutationObserver

Dokumentasi untuk MutationObserver terdapat di MDN, dan cukup lengkap. Penggantian codebase Anda bergantung pada cara peristiwa ini digunakan, tetapi sebagai contoh:

// 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});  

Meskipun kode MutationObserver muncul lebih besar daripada kode pemroses peristiwa DOMNodeInserted asli, perhatikan bahwa kode tersebut dapat menangani semua mutasi yang terjadi pada seluruh hierarki dalam satu panggilan, daripada memerlukan beberapa panggilan ke pengendali peristiwa.

Polyfill

Ada polyfill yang mencoba mengizinkan kode yang ada untuk terus berfungsi, selagi didukung oleh MutationObserver. Polyfill terletak di GitHub atau sebagai paket npm.

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

Linimasa dan informasi uji coba penghentian penggunaan

Peristiwa mutasi akan dihapus dari Chrome 127 bagi semua pengguna* dan akan menuju ke rilis Stabil pada 23 Juli 2024. Sebagai peringatan awal, peristiwa tersebut akan mulai dihapus dari saluran Canary, Dev, dan Beta lebih awal.

• Jika Anda memerlukan waktu tambahan (setelah Juli 2024) untuk memigrasikan kode, ada Uji Coba Penghentian Layanan yang mengaktifkan kembali peristiwa tersebut untuk sementara di situs tertentu. Ada juga Enterprise Policy bernama MutationEventsEnabled yang berfungsi dengan cara serupa bagi pengguna versi bisnis. Kedua opsi ini memberi sekitar sembilan bulan waktu tambahan untuk bermigrasi, jika diperlukan.