Mengumumkan penghentian penggunaan dan rencana penghapusan peristiwa mutasi, serta membagikan cara memigrasikan kode Anda sebelum penghapusan pada Juli 2024.
Chromium secara resmi telah menghentikan penggunaan peristiwa mutasi, dan berencana untuk menghapus dukungan mulai versi 127, yang akan dirilis stabil pada 23 Juli 2024. Postingan ini menjelaskan alasan kami menghapus peristiwa mutasi, dan menyediakan jalur untuk melakukan migrasi sebelum peristiwa tersebut dihapus dari browser.
Apa yang dimaksud dengan peristiwa mutasi?
Peristiwa mutasi adalah nama untuk kumpulan peristiwa berikut:
DOMNodeInsertedDOMNodeRemovedDOMSubtreeModifiedDOMCharacterDataModifiedDOMNodeInsertedIntoDocumentDOMNodeRemovedFromDocument- (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. Fitur ini digantikan oleh antarmuka MutationObserver, yang telah didukung di semua browser modern sejak 2013.
Histori peristiwa mutasi
Peristiwa mutasi terdengar seperti ide bagus sejak lama, tetapi ternyata memiliki beberapa kelemahan fatal:
- Bentuknya panjang dan sering terbakar. Sebuah peristiwa akan diaktifkan untuk setiap node yang dihapus.
- Proses ini lambat karena penerapan peristiwa dan karena mencegah banyak pengoptimalan waktu proses UA.
- Keduanya sering menyebabkan error. Mereka telah 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 ini, event tidak digunakan lagi dari spesifikasi pada tahun 2011 dan API pengganti (MutationObserver) dibuat pada tahun 2012. API baru tersebut 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 acara lain, perilaku tertentu bervariasi karena kurangnya spesifikasi yang disetujui. Namun, pertanyaan yang masuk akal mungkin: mengapa tidak membiarkannya di sana saja, karena tugas-tugas itu "selesai" dan hanya memperlambat halaman yang menggunakannya? Jawabannya ada dua bagian.
Pertama, peristiwa ini menghambat platform web. Seiring perkembangan web dan penambahan API baru, keberadaan API lama ini harus diperhitungkan. Terkadang, hanya kebutuhan untuk mendukung peristiwa ini dapat mencegah API baru diusulkan. Sebagai salah satu contoh, ada permintaan yang sudah lama ada 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 tersebut terus menjadi penghalang untuk membuat browser lebih cepat. Bahkan dengan pengoptimalan yang dimiliki browser, yang berupaya menghindari penalti kinerja pada halaman yang tidak menggunakan peristiwa mutasi, semuanya tidak sempurna. Pemeriksaan masih perlu dilakukan di banyak tempat untuk pemroses Peristiwa Mutasi. Kode masih harus ditulis dengan sangat defensif, karena peristiwa ini dapat mengubah DOM secara 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, kini saatnya untuk akhirnya menghapus peristiwa mutasi dari browser sekali dan 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 terlihat lebih besar daripada kode pemroses peristiwa DOMNodeInserted asli, perhatikan bahwa kode tersebut dapat menangani semua mutasi yang terjadi di seluruh hierarki dalam satu panggilan, alih-alih memerlukan beberapa panggilan ke pengendali peristiwa.
Isi Ulang
Ada polyfill yang mencoba mengizinkan kode yang ada untuk terus berfungsi, sementara didukung oleh MutationObserver. Polyfill berada 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
Peristiwa mutasi akan dihapus dari Chrome 127 untuk semua pengguna* yang akan dialihkan ke rilis Stabil pada 23 Juli 2024. Peristiwa tersebut akan mulai dihapus dari saluran Canary, Dev, dan Beta lebih awal dari itu, sebagai peringatan awal.
- Jika Anda memerlukan waktu tambahan (setelah Juli 2024) untuk memigrasikan kode, ada Uji Coba Penghentian Penggunaan yang mengaktifkan kembali peristiwa tersebut untuk sementara di situs tertentu. Ada juga Enterprise Policy bernama
MutationEventsEnabledyang berfungsi dengan cara serupa bagi pengguna versi bisnis. Kedua opsi ini memberikan sekitar sembilan bulan waktu tambahan untuk bermigrasi, jika diperlukan.