Amalan terbaik untuk manipulasi DOM yang cekap di JavaScript

Artikel ini meneroka amalan terbaik untuk operasi DOM JavaScript yang cekap, bertujuan untuk meningkatkan prestasi dan mengurangkan risiko kesilapan. DOM (Model Objek Dokumen) adalah API laman web yang membolehkan JavaScript mengakses dan memanipulasi kandungan dan struktur dokumen HTML.

1. Gunakan kelas CSS dan bukannya gaya inline

   Apabila gaya DOM yang menggayakan, lebih baik menggunakan kelas CSS dan bukannya gaya inline. Kelas CSS mudah diubahsuai dan digunakan semula, sementara gaya inline sukar untuk dikendalikan dan diselenggara.
   Sebagai contoh, bukannya menulis:

   document.getElementById('button').style.backgroundColor = 'red';

   ini lebih baik:

   .button-style {
       background-color: red;
   }

   kemudian gunakan gaya seperti ini:

   let cardButton = document.getElementById('button');
   cardButton.classList.add('button-style');

2. pemilih cache

   Cache pemilih dapat meningkatkan kecekapan kod operasi DOM. Simpan hasil pemilih dalam pembolehubah untuk digunakan semula dan elakkan pertanyaan berulang DOM.
   Sebagai contoh, bukannya menulis:

   document.querySelector('#button').addEventListener('click', function() {
       // do something
   });
   document.querySelector('#button').className = "enabled";

   ini lebih baik:

   const myButton = document.querySelector('#button');
   myButton.addEventListener('click', function() {
       // do something
   });
   myButton.className = "enabled";

3. Menggunakan delegasi acara

   Perwakilan acara merujuk kepada melampirkan pendengar acara ke elemen induk dan kemudian memproses peristiwa yang berlaku pada unsur -unsur anaknya. Sekiranya terdapat banyak elemen kanak -kanak, ini lebih cekap daripada melampirkan pendengar acara kepada setiap elemen kanak -kanak secara berasingan. Perwakilan acara juga boleh menjadikan kod lebih ringkas dan mudah dikekalkan.
   Contoh:
   di sini, kami menambah acara klik ke bekas induk, bukannya menambah acara klik ke setiap butang. Dalam pengendali acara, gunakan kaedah

   , getElementById atau querySelector untuk memilih elemen berdasarkan pemilih CSS. getElementsByClassName

4. Elakkan menggunakan innerHTML

   Walaupun mudah untuk memanipulasi unsur-unsur DOM dan HTML, ia mempunyai risiko keselamatan dan terdedah kepada serangan skrip lintas tapak (XSS). Di samping itu, apabila mengemas kini kandungan HTML secara dinamik, innerHTML lebih perlahan daripada kaedah lain, kerana ia memerlukan penyemak imbas untuk menghuraikan dan menjadikan keseluruhan kandungan HTML elemen. innerHTML

   Kaedah alternatif termasuk:

   , textContent. appendChild()

   const newText = document.createElement('p');
   const parentElement = document.getElementById('heading');
   parentElement.appendChild(newText);

5. Elakkan elemen bersarang dalam pemilih

   Dalam beberapa kes, elemen bersarang dalam pemilih bukan amalan terbaik. Ini akan mengurangkan kebolehgunaan semula pemilih dan meningkatkan kesukaran penyelenggaraan kod. Jika struktur HTML berubah, pemilih mungkin tidak lagi sepadan dengan elemen sasaran.
   Sebagai contoh, bukannya menulis:

   document.querySelector('#parent .child');

   ini lebih baik:

   const parent = document.querySelector('#parent');
   const child = parent.querySelector('.child');

   Contoh lain:

   // 不佳实践
   let menuHead = document.querySelector('header > nav > ul.menu');
   
   // 良好实践
   let menuHead = document.querySelector('.menu');

6. Hadkan bilangan operasi DOM

   Operasi dom boleh menjadi perlahan, terutamanya apabila halaman diubahsuai dengan kerap. Kurangkan bilangan operasi DOM untuk mengoptimumkan prestasi. Sebagai contoh, jika anda perlu menukar teks perenggan dan warna latar belakang butang, sebaiknya mengubahnya pada masa yang sama dan bukannya secara berasingan.

7. Kesimpulan

   Operasi DOM yang cekap adalah penting untuk membuat aplikasi web yang cepat dan berpengalaman. Berikutan amalan terbaik, termasuk mengurangkan jumlah perubahan DOM dan menggunakan perwakilan acara, dapat mempercepat kod dan mengurangkan risiko masalah prestasi. Ia juga penting untuk menguji dan menilai kod untuk menemui dan menyelesaikan masalah.

Atas ialah kandungan terperinci Amalan terbaik untuk manipulasi DOM yang cekap di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!