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

Mason Freed

Chromium secara resmi tidak lagi menggunakan peristiwa mutasi, dan memiliki rencana untuk menghapus dukungan mulai versi 127, yang akan dirilis stabil pada 23 Juli 2024. Postingan ini menjelaskan alasan kami menghapus peristiwa mutasi, dan memberikan jalur untuk melakukan migrasi sebelum peristiwa tersebut 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. Keduanya diganti dengan antarmuka MutationObserver, yang telah didukung di semua browser modern sejak tahun 2013.

Histori peristiwa mutasi

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

• Log ini panjang dan terlalu sering diaktifkan. Peristiwa diaktifkan untuk setiap node yang dihapus.
• Peristiwa ini lambat, karena penyebaran peristiwa dan karena mencegah banyak pengoptimalan waktu proses UA.
• Error sering kali menyebabkan error. Hal ini menjadi sumber banyak error dan bug keamanan di browser, karena pemroses peristiwa dapat 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 ini telah diterapkan dan berfungsi selama lebih dari 10 tahun.

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 disepakati. Namun, pertanyaan yang masuk akal mungkin: mengapa tidak membiarkannya begitu saja, karena mereka telah "selesai" dan hanya memperlambat halaman yang menggunakannya? Jawabannya terdiri dari dua bagian.

Pertama, peristiwa ini menghambat platform web. Seiring berkembangnya web, dan API baru ditambahkan, keberadaan API lama ini harus diperhitungkan. Terkadang, hanya kebutuhan untuk mendukung peristiwa ini yang dapat mencegah API baru diusulkan. Sebagai salah satu contoh, telah ada permintaan 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 upaya untuk membuat browser lebih cepat. Meskipun dengan pengoptimalan yang dimiliki browser, yang mencoba menghindari penalti performa pada halaman yang tidak menggunakan peristiwa mutasi, semuanya tidak sempurna. Pemeriksaan masih perlu dilakukan di banyak tempat untuk pemroses Peristiwa Mutasi. Kode masih perlu ditulis dengan sangat defensif, karena peristiwa ini dapat mengubah DOM dengan cara yang mengejutkan.

Karena sudah lebih dari 10 tahun sejak peristiwa ini tidak digunakan lagi secara resmi, dan API penggantinya juga telah tersedia selama lebih dari 10 tahun, saatnya untuk menghapus peristiwa mutasi dari browser secara permanen.

Cara melakukan migrasi

Sebagai gantinya, gunakan MutationObserver

Dokumentasi untuk MutationObserver terletak di MDN, dan cukup lengkap. Penggantian untuk 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 tampak lebih besar dari kode pemroses peristiwa DOMNodeInserted asli, perhatikan bahwa kode ini dapat menangani semua mutasi yang terjadi di seluruh hierarki dalam satu panggilan, bukan memerlukan beberapa panggilan ke pengendali peristiwa.

Polyfill

Ada polyfill yang mencoba mengizinkan kode yang ada untuk terus berfungsi, sambil 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

Informasi uji coba penghentian dan linimasa

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

• Jika Anda memerlukan waktu tambahan (di atas 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 memberikan waktu tambahan sekitar sembilan bulan untuk bermigrasi, jika diperlukan.