Rumah >hujung hadapan web >tutorial js >Mengapa DOM Maya: Render dan Prestasi

Mengapa DOM Maya: Render dan Prestasi

Linda Hamiltonasal: 2024-11-03 14:11:30770semak imbas

Dalam artikel ini, kami akan meneliti dom secara terperinci dan apakah itu dom maya.

Apakah itu DOM (Document Objec Model) ?

Apabila halaman web dimuatkan ke dalam penyemak imbas, penyemak imbas menjana HTML untuk memaparkan halaman yang diminta kepada . Struktur html ini seperti pokok. DOM terbentuk hasil daripada menukar kandungan dokumen web (HTML atau XML) kepada struktur berorientasikan objek oleh penyemak imbas. Terima kasih kepada struktur ini, kandungan halaman adalah disusun dalam struktur pokok dalam pelayar dan setiap tag atau kandungan HTML diwakili sebagai "nod".

Sekarang teroka model objek dokumen :

Mari kita tulis contoh kod untuk mengakses objek dokumen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

console.log(document)

Output :

Why Virtual DOM: Render and Performance

Kami boleh mengakses dom dengan console.log(dokumen). Apabila kami memeriksa objek Dokumen, kami faham bahawa objek ini mewakili dokumen HTML. Dalam erti kata lain, objek dokumen mengandungi semua teg dalam dokumen HTML.

Dengan Javascript, kami boleh mengakses teg di dalam objek dokumen dan memanipulasi teg di dalam objek dokumen ini untuk mencipta halaman web dinamik. Mari kita berikan contoh cara mengakses :

const wrapper = document.getElementById("card")

console.log(wrapper)

Output:

Why Virtual DOM: Render and Performance

Apakah DOM Maya?

Why Virtual DOM: Render and Performance

Kini kami tahu bahawa cara paling mudah untuk menukar dom ("Tukar HTML") ialah menukar sifat innerHTML dalam elemen. Kaedah mengubah suai html ini tidak prestasi dengan baik dalam DOM mengecat semula (" Mengemas kini perkara yang pengguna lihat "). Ini kerana innerHTML perlu menghuraikan nod DOM daripada rentetan, praproses dan menambahkannya. jika terdapat terlalu banyak mutasi html pada halaman web, masalah prestasi akan berlaku.

Jadi bagaimana isu prestasi diselesaikan ?

Masalah ini telah dibetulkan dengan mencipta DOM maya. DOM maya ialah salinan DOM sebenar yang disimpan dalam ingatan. Apabila pengguna berinteraksi dengan halaman web dan keadaan halaman web dikemas kini, DOM maya baharu dicipta dalam ingatan. DOM maya baharu ini dibandingkan dengan DOM maya sebelumnya untuk mengenal pasti perubahan dan perubahan ini digunakan pada DOM sebenar untuk ditunjukkan kepada pengguna.

Ini ialah logik kerja perpustakaan moden yang anda gunakan dan menggunakan algoritma dif sebagai perbandingan. mereka semua menggunakan DOM maya. Tetapi walaupun pendekatan DOM maya adalah pantas, terdapat perkara yang perlu dipertimbangkan untuk prestasi. Perubahan dalam domain maya menjadikan seluruh halaman web Perpustakaan mempunyai cangkuk untuk pengoptimuman prestasi

Kesimpulan

dalam artikel ini, kami telah mengkaji apakah dom dan DOM maya itu. Kami mendapati mengapa dom maya digunakan. Kini anda tahu apa itu dom dan dom maya.

Atas ialah kandungan terperinci Mengapa DOM Maya: Render dan Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html String Object if for xml Property append copy console dom this innerHTML display issue Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Adakah Manipulasi DOM Langsung Cara Terbaik untuk Mengubah Meta-Tag dengan JavaScript?Artikel seterusnya：Adakah Manipulasi DOM Langsung Cara Terbaik untuk Mengubah Meta-Tag dengan JavaScript?

Artikel berkaitan

Lihat lagi