Memahami Angular Ivy: DOM tambahan dan DOM Virtual

Angular adalah alat utama kami untuk menulis aplikasi TestMace . Dalam salah satu artikel sebelumnya, kami menyentuh pada topik penyaji Ivy. Saatnya mempelajari lebih lanjut tentang perbedaan Ivy dari mesin sebelumnya.

Di Nrwl, kami telah menunggu beberapa saat peluang yang akan ditawarkan Ivy kepada kami dan pelanggan kami. Angular Ivy adalah mesin render Angular baru, yang secara fundamental berbeda dari semua teknologi serupa dari kerangka kerja populer karena menggunakan DOM Incremental.

Apa itu DOM tambahan dan apa bedanya dengan Virtual DOM?

Mari kita melakukan analisis komparatif dan mencari tahu mengapa DOM tambahan adalah solusi yang tepat untuk Angular.

Bagaimana Virtual DOM Bekerja

Bereaksi adalah kerangka kerja yang cukup umum yang menggunakan Virtual DOM untuk pertama kalinya. Ide dasarnya adalah sebagai berikut:
Setiap komponen membuat pohon VDOM baru setiap kali diberikan. Bereaksi membandingkan pohon baru dengan pohon sebelumnya, setelah itu membuat serangkaian perubahan pada DOM browser untuk membawanya sejalan dengan pohon VDOM baru.

Virtual DOM memiliki dua keunggulan utama:

• Kemampuan untuk menggunakan bahasa pemrograman apa pun untuk mengimplementasikan fungsi rendering komponen dan kurangnya kebutuhan untuk kompilasi. Bereaksi sebagian besar pengembang menulis di BEJ, tetapi JavaScript biasa baik-baik saja.
• Sebagai hasil rendering komponen, kami mendapatkan nilai yang dapat berguna saat pengujian, debugging, dll.

Dom tambahan

Incremental DOM digunakan oleh Google untuk kebutuhan internal. Gagasan utamanya adalah ini:

Setiap komponen dikompilasi menjadi satu set instruksi yang membuat pohon DOM dan langsung memperbaruinya ketika data berubah.
Sebagai contoh, komponen ini:

@Component({ selector: 'todos-cmp', template: ` <div *ngFor="let t of todos|async"> {{t.description}} </div> ` }) class TodosComponent { todos: Observable<Todo[]> = this.store.pipe(select('todos')); constructor(private store: Store<AppState>) {} } 

Ini akan dikompilasi ke:

 var TodosComponent = /** @class */ (function () { function TodosComponent(store) { this.store = store; this.todos = this.store.pipe(select('todos')); } TodosComponent.ngComponentDef = defineComponent({ type: TodosComponent, selectors: [["todos-cmp"]], factory: function TodosComponent_Factory(t) { return new (t || TodosComponent)(directiveInject(Store)); }, consts: 2, vars: 3, template: function TodosComponent_Template(rf, ctx) { if (rf & 1) { // create dom pipe(1, "async"); template(0, TodosComponent_div_Template_0, 2, 1, null, _c0); } if (rf & 2) { // update dom elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos))); } }, encapsulation: 2 }); return TodosComponent; }()); 

Fungsi template berisi instruksi untuk merender dan memperbarui DOM. Harap dicatat bahwa instruksi tidak diinterpretasikan oleh mesin rendering kerangka kerja. Mereka adalah mesin rendering.

Manfaat DOM tambahan

Mengapa Google memutuskan untuk memilih DOM Incremental, dan bukan DOM Virtual?

Tugas yang mereka tetapkan adalah membuat aplikasi menunjukkan kinerja yang baik pada perangkat seluler. Jadi, perlu untuk mengoptimalkan ukuran bundel dan jumlah memori yang dikonsumsi.

Untuk mengatasi tugas-tugas di atas:

• Mesin rendering harus bisa digerakkan pohon
• Mesin rendering tidak harus mengkonsumsi banyak memori

DOM tambahan dan pengocokan pohon

Saat menggunakan DOM tambahan, kerangka kerja tidak menafsirkan komponen; sebagai gantinya, komponen mengacu pada instruksi. Jika ada instruksi yang tidak tersentuh, maka itu tidak akan digunakan di masa depan. Karena informasi ini diketahui pada waktu kompilasi, Anda dapat mengecualikan instruksi yang tidak digunakan dari bundel.

Virtual DOM membutuhkan penerjemah untuk bekerja. Pada saat kompilasi, tidak diketahui bagian mana yang dibutuhkan dan bagian mana yang tidak, sehingga perlu untuk mengarahkannya ke browser sepenuhnya.

Konsumsi DOM dan memori tambahan

Virtual DOM membuat seluruh pohon dari awal dengan setiap rendering ulang.

Incremental DOM tidak memerlukan memori untuk merender ulang tampilan jika tidak membuat perubahan pada DOM. Memori perlu dialokasikan hanya jika node DOM ditambahkan atau dihapus, dan jumlah memori yang dialokasikan akan sebanding dengan perubahan yang dilakukan pada DOM.

Karena sebagian besar panggilan untuk membuat / template tidak membuat perubahan (atau perubahan yang dilakukan kecil), penghematan memori yang signifikan tercapai.

DOM menang secara bertahap?

Tentu saja, semuanya tidak begitu sederhana. Misalnya, fakta bahwa fungsi render mengembalikan nilai memberikan kemampuan yang sangat baik, misalnya, dalam pengujian. Di sisi lain, eksekusi instruksi langkah demi langkah dengan Firefox DevTools menyederhanakan debugging kinerja dan profil. Ergonomi dari metode tertentu tergantung pada kerangka kerja yang digunakan dan preferensi pengembang.

Ivy + DOM Tambahan =?

Angular selalu dibangun berdasarkan penggunaan HTML dan templat (beberapa tahun yang lalu saya menerbitkan sebuah posting di mana saya menjabarkan pemikiran saya dalam mendukung solusi ini dan efektivitas jangka panjangnya). Itulah sebabnya kartu truf utama Virtual DOM tidak akan pernah menjadi pemenang untuk Angular.

Dengan semua ini, kegoyahan pohon, dan konsumsi memori yang rendah, saya merasa bijaksana untuk menggunakan DOM Incremental sebagai dasar untuk mesin render baru.

Jika Anda memerlukan saran sudut, pelatihan atau informasi dukungan, Anda dapat membaca tentang metode layanan pelanggan kami di sini