Apakah Shadow DOM cepat seperti Virtual DOM di React.js?

87

Apakah menerapkan Shadow DOM dalam proyek saya akan membuatnya lebih cepat seperti DOM virtual yang digunakan oleh React?

dom web-component shadow-dom virtual-dom Hmoo_oomH
sumber

Jawaban:

126

DOM Virtual

DOM virtual adalah tentang menghindari perubahan yang tidak perlu pada DOM, yang mahal dari segi performa, karena perubahan pada DOM biasanya menyebabkan perenderan ulang laman. DOM Virtual juga memungkinkan untuk mengumpulkan beberapa perubahan untuk diterapkan sekaligus, jadi tidak setiap perubahan menyebabkan perenderan ulang, tetapi perenderan ulang hanya terjadi sekali setelah sekumpulan perubahan diterapkan ke DOM.

Shadow DOM

Shadow dom sebagian besar tentang enkapsulasi implementasi. Satu elemen khusus dapat mengimplementasikan logika yang lebih-atau-kurang kompleks yang dikombinasikan dengan DOM yang lebih-atau-kurang kompleks. Seluruh aplikasi web dengan kompleksitas yang sewenang-wenang dapat ditambahkan ke halaman dengan mengimpor dan <body><my-app></my-app>juga komponen yang dapat digunakan kembali dan disusun yang lebih sederhana dapat diimplementasikan sebagai elemen khusus di mana representasi internal disembunyikan dalam shadow DOM seperti <date-picker></date-picker>.

Enkapsulasi gaya Shadow DOM juga tentang mencegah gaya diterapkan secara tidak sengaja ke elemen yang tidak diinginkan oleh desainer, misalnya karena CSS atau pustaka komponen yang Anda gunakan mengubah pemilih yang sekarang berlaku untuk elemen lain yang menggunakan nama kelas CSS yang sama. Gaya yang ditambahkan ke komponen dicakup ke komponen itu dan perubahan gaya atau gaya dicegah.

Shadow DOM dan kinerja

Meskipun shadow DOM bukan tentang kinerja pada awalnya, shadow DOM juga memiliki implikasi kinerja. Karena gaya memiliki cakupan, browser dapat membuat asumsi tentang beberapa perubahan untuk hanya memengaruhi area halaman yang terbatas (shadow DOM dari elemen kustom) yang dapat membatasi rendering ulang ke area komponen seperti itu, alih-alih rendering ulang seluruh halaman.

Ini adalah alasan >>>, /deep/dan ::shadowcombinators CSS, yang memungkinkan untuk menerapkan gaya melintasi batas-batas bayangan DOM, yang usang dan tunduk segera dihapus dari Chrome (browser lain pernah mereka AFAIK). Keberadaan penggabung ini saja mencegah jenis pengoptimalan yang disebutkan di paragraf sebelumnya.

Angular2 menggunakan keuntungan dari kedua dunia.

Ini menggunakan aliran data searah dan menjalankan deteksi perubahan hanya pada model. Jika mendeteksi perubahan itu menyebabkan DOM yang akan diperbarui oleh binding memperbarui dan membuat arahan struktural seperti *ngFor, *ngIf, ... memperbarui DOM. Oleh karena itu, DOM hanya diperbarui ketika model benar-benar berubah.

Angular2 menggunakan shadow DOM (hanya ViewEncapsulation.Nativeyang saat ini bukan default) untuk memanfaatkan kemampuan enkapsulasi gaya yang disediakan oleh browser, atau (default saat ini) hanya meniru enkapsulasi gaya dengan menulis ulang gaya yang ditambahkan ke komponen, sebagai solusi hingga variabel shadow DOM dan CSS asli (untuk perubahan gaya global yang dinamis) tersedia secara luas.

Günter Zöchbauer
sumber
8
... dan DOM tidak lambat. Kamu adalah. korynunn.wordpress.com/2013/03/19/the-dom-isnt-slow-you-are
Mattia Astorino
beberapa jawaban praktis bisa menambah makna.
Kode
@ Kode Apa arti yang hilang? Pertanyaan tentang kinerja biasanya tidak ada gunanya secara umum. Jika Anda benar-benar perlu mengetahuinya, buatlah benchmark yang mencakup kasus penggunaan Anda.
Günter Zöchbauer
70

Tidak, Shadow DOM dan Virtual DOM tidak terkait, meskipun namanya agak mirip:

Virtual DOM: Konsep React menyimpan dua salinan DOM (asli, dan yang diperbarui) untuk alasan yang berbeda. Sebelum rendering, React membedakan kedua objek tersebut untuk menentukan apakah itu harus menerapkan pembaruan ke pohon DOM yang sebenarnya. Ini menghasilkan kinerja yang ditingkatkan, karena kami hanya memperbarui bagian tampilan yang memerlukannya, bukan seluruh layar.

Shadow DOM: Bagian dari spesifikasi Komponen Web seperti yang diusulkan oleh W3C, yang pada dasarnya memungkinkan enkapsulasi elemen DOM yang lebih kecil dan gaya CSS ke dalam satu elemen DOM:

Contoh Elemen Shadow DOM

<video width="300" height="150" />

Namun, <video>sebenarnya merangkum elemen-elemen berikut:

<div>
   <input type="button" style="color: blue;">Play
   <input type="button" style="color: red;">Pause
   <source src="myVideo.mp4">
</div>

Jadi dengan menggunakan Shadow DOM, kami dapat menyembunyikan detail implementasi elemen web kami, dan hanya meneruskan informasi yang diperlukan ke sub-elemen (yaitu height, width), yang, mungkin membingungkan, sangat mirip dengan idiom ReactJS untuk meneruskan propske komponen. .

Informasi disediakan melalui :

lux
sumber
Apakah maksud Anda kinerja Shadow DOM seperti DOM tetapi hanya dienkapsulasi?
Hmoo_oomH
3
@Hmoo_oomH Pemahaman saya adalah bahwa Shadow DOM lebih mudah dibaca - karena kami menyembunyikan detail implementasi elemen web kompleks di balik elemen tingkat tinggi (mis. <video>), Tetapi tidak ada harapan untuk peningkatan kinerja.
lux