javascript - Mengapa kecekapan DOM maya bertindak balas lebih cepat daripada DOM yang beroperasi secara langsung?

Question

Terdapat konsep DOM maya dalam React
Perbezaan antaranya dan operasi DOM asli ialah JS digunakan untuk menjana DOM maya yang serupa dengan perantara
Ini ialah DOM yang dilaksanakan menggunakan JS. Ia merekodkan beberapa rekod sebelum dan selepas perubahan, dan kemudian semula- Apabila membuat, lakukan pemaparan tempatan bahagian yang dibezakan. Ini mengelakkan pemaparan keseluruhan halaman? Kemudian operasi asli DOM adalah untuk memaparkan keseluruhan halaman? Saya melihat banyak contoh di Internet yang mengatakan bahawa setiap kali innerHTML berubah, innerHTML terus ditetapkan Jika sejumlah besar data digunakan dalam operasi ini, ia akan menjadi GG, ha? DOM maya merekodkan perubahan, kemudian menggunakan algoritma perbezaannya untuk mengoptimumkan, dan akhirnya menghasilkan secara setempat di mana terdapat perubahan Jadi saya tidak boleh mencapai kesan yang sama menggunakan asli? Tidak bolehkah saya juga mencari perubahan melalui perbandingan dan kemudian menggunakan algoritma diff untuk mengubah suai innerHTML di lokasi yang ditentukan? Adakah kecekapan ini lebih teruk daripada dom maya? Selesaikan

Answer 1

Pemahaman saya ialah anda boleh melakukannya lebih cepat daripada React jika anda boleh melakukan dua perkara:

1. Elakkan render semula yang tidak perlu.

2. Mempunyai algoritma diff yang lebih baik!

Sila lihatstackoverflow上virtual domjawapan pengarang untuk butiran.

Answer 2

Begini:
Pertama sekali, dom maya tidak lebih pantas daripada operasi asli langsung Apa yang dipanggil "cepat" adalah bersyarat
Sebagai contoh, seperti, nombor +1, operasi langsung dom akan menjadi lebih pantas.
Jika anda. boleh melakukannya sendiri Peraturannya ialah, setiap kali anda mengendalikan dom secara manual, hanya ubah apa yang sepatutnya diubah Maka operasi dom akan sentiasa lebih pantas daripada dom maya
Tetapi jika perubahan anda disambungkan ke banyak tempat dan anda mahu mengekalkan keadaan, maka perbezaan automatik dom maya sudah pasti akan membolehkan anda menjimatkan lebih banyak kebimbangan.
Sebagai contoh, dalam senarai, item senarai mempunyai status seperti suka, bilangan balasan dan maklumat lain, terdapat penambahan dinamik dan pemuatan dinamik. Pada masa ini, ia akan menjadi sangat menyusahkan untuk anda mengendalikan dom secara langsung. diubahsuai. Apa yang disimpan bukan kelajuan kecil seperti kelajuan berjalan, tetapi "kelajuan keseluruhan" seperti kelajuan pembangunan / kelajuan penyelenggaraan / kesederhanaan logik, DOM maya juga mempunyai kekurangannya, yang saya tidak akan pergi di sini

Answer 3

Jika anda menghabiskan banyak usaha untuk mengoptimumkan setiap perubahan DOM pada setiap halaman, anda pasti akan lebih pantas daripada DOM maya automatik;
Masalahnya ialah anda tidak akan melakukan ini dalam keadaan biasa.
Jadi dalam kebanyakan kes, DOM vitrual boleh memberikan keupayaan yang lebih kuat (seperti memberikan kawalan ke atas kanvas) dalam keadaan yang lebih pantas.

Answer 4

Visual DOM tidak lebih pantas daripada memanipulasi DOM secara langsung (dengan syarat kod yang anda tulis cukup baik), ia muncul kerana mekanisme React re-render all. Maksudnya, untuk React, sebarang perubahan memerlukan pemaparan semula keseluruhan aplikasi Jika ia adalah DOM sebenar, prestasi sedemikian tidak boleh diterima.

Anda boleh menyemak jawapan Youda untuk butiran

Answer 5

(Gunakan perbezaan VDOM untuk mengemas kini DOM secara terpilih) (umumnya) lebih cepat daripada (bina semula DOM setiap kali)

Algoritma perbezaan biasanya mengorbankan kualiti untuk mengurangkan kerumitan masa dan tidak dijamin memberikan perbezaan minimum. Maka mungkin untuk membina beberapa VDOM supaya keputusan berbeza adalah untuk membina semula DOM Dalam kes ini, VDOM mungkin lebih perlahan.