Mengumumkan penghentian penggunaan dan penghapusan terencana peristiwa mutasi, serta membagikan cara memigrasikan kode Anda sebelum penghapusan pada Juli 2024.
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:
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 telah 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 terdengar seperti ide bagus sejak lama, 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.
- Hal ini sering 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 kekurangan ini, 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 wajar mungkin adalah: mengapa tidak membiarkannya saja, karena "selesai" dan hanya memperlambat halaman yang menggunakannya? Jawabannya terdiri dari dua bagian.
Pertama, peristiwa ini menghambat platform web. Seiring perkembangan 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 daripada 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 untuk semua pengguna* yang akan beralih ke rilis Stabil pada 23 Juli 2024. Peristiwa tersebut akan mulai dihapus dari saluran Canary, Dev, dan Beta lebih awal dari itu, sebagai peringatan dini.
- Jika Anda memerlukan waktu tambahan (setelah Juli 2024) untuk memigrasikan kode, ada Uji Coba Penghentian yang mengaktifkan kembali peristiwa untuk sementara di situs tertentu. Ada juga Kebijakan Perusahaan yang disebut
MutationEventsEnabledyang berfungsi dengan cara yang serupa untuk pengguna versi bisnis. Kedua opsi ini memberikan waktu tambahan sekitar sembilan bulan untuk melakukan migrasi, jika diperlukan.