Sejak rilis kontrol pohon MzTreeView1.0 saya, saya telah menerima banyak masukan. Banyak netizen yang memberi saya banyak saran terkait dan menunjukkan banyak bug dan kekurangan dalam kontrol ini, jadi saya berencana untuk menulis versi baru. Tree, mengintegrasikan saran semua orang ke dalam implementasi. Saya telah menulis pohon versi baru akhir-akhir ini. Hal terpenting tentang kontrol pohon adalah efisiensi. Terutama ketika jumlah node banyak, mode yang sedikit kurang efisien akan menurunkan browser pohon, prioritas pertama saya adalah meningkatkan efisiensi, seperti menambahkan dukungan untuk pemuatan data asinkron, dll. Selain itu, saya juga memiliki gagasan bahwa garis vertikal struktur pohon diimplementasikan menggunakan style sheet (gambar latar belakang). Gambar latar belakang style sheet hanya perlu dimuat sekali, dan sekarang mode ini (menggunakan Meskipun beberapa gambar <img>) memiliki mekanisme cache, masih dimungkinkan untuk meminta server satu kali untuk setiap gambar kecil, jadi saya pikir betapa bagusnya itu akan menggunakan style sheet untuk mencapai hal ini. Kodenya disederhanakan, strukturnya jelas, dan efeknya bagus. Keren, tetapi setelah hampir seminggu pengujian, ide saya gagal total style sheetnya terlalu buruk. Ide baru tersebut tidak dapat terwujud, dan saya merasa sedikit frustrasi, namun saya pikir saya harus membagikan hasil tes tersebut kepada semua orang.
Disini saya akan menjelaskan garis vertikal pada bentuk pohon. Ada ┌ ├ └ │ di sisi kiri pohon. Garis vertikal ini mewakili tingkatan pohon. Di versi 1.0 saya menggunakan gambar kecil yang ditumpuk satu per satu jenis penggunaan Style sheet diimplementasikan menggunakan kode seperti <div class="l2"></div>, dan style sheet bertanggung jawab untuk mengisi gambar latar belakang.
#mtvroot div td{lebar:20px;tinggi:20px;}
#mtvroot .l0{background:url(line0.gif) pusat tanpa pengulangan}
#mtvroot .l1{background:url(line1.gif) pusat tanpa pengulangan}
#mtvroot .l2{background:url(line2.gif) pusat tanpa pengulangan}
#mtvroot .l3{background:url(line3.gif) pusat tanpa pengulangan}
#mtvroot .l4{background:url(line4.gif) pusat tanpa pengulangan}
#mtvroot .ll{background:url(line5.gif) pusat tanpa pengulangan}
#mtvroot .pm0{background:url(plus0.gif) pusat tanpa pengulangan}
#mtvroot .pm1{background:url(plus1.gif) pusat tanpa pengulangan}
#mtvroot .pm2{background:url(plus2.gif) pusat tanpa pengulangan}
#mtvroot .pm3{background:url(plus3.gif) pusat tanpa pengulangan}
#mtvroot .expand .pm0{background:url(minus0.gif) pusat tanpa pengulangan}
#mtvroot .expand .pm1{background:url(minus1.gif) pusat tanpa pengulangan}
#mtvroot .expand .pm2{background:url(minus2.gif) pusat tanpa pengulangan}
#mtvroot .expand .pm3{background:url(minus3.gif) no-repeat center}
CSS di atas adalah bagian dari gaya yang saya buat secara dinamis dalam skrip. Saya mempostingnya untuk membantu penjelasannya nanti. Setelah menggunakan style sheet, itu benar-benar disederhanakan dan pembuatan setiap node cukup cepat. Namun, saya menemukan bahwa ketika jumlah node pohon saya mencapai, misalnya, 300-500 node, efisiensi pembuatan node tidak berpengaruh. , tetapi setiap kali perluasan/penyusutan suatu node sangat lambat, memakan waktu lebih dari beberapa detik atau bahkan 10 detik, dan penggunaan CPU selama periode ini adalah 100%. Untuk menjelaskannya, perluasan/kontraksi pohon dicapai dengan mengatur style.display = none|block dari node induk. Konfigurasi komputer saya adalah: memori AMD2800+ 1GDDR400, konfigurasinya lumayan.
Reaksi pertama saya adalah: Apakah menggunakan terlalu banyak <tabel> mempengaruhi efisiensi? Karena saya menggunakan <table> untuk setiap node, tetapi saya mengganti <table> dengan <div>, <span>, dll, tetapi tidak ada peningkatan efisiensi yang berarti masalah penggunaan CPU 100% tidak masalah tag HTML. , maka masalah yang tersisa adalah penggunaan style sheet di sini.
Mengambil jumlah 500 node sebagai contoh, akan ada sekitar 2.000 gambar kecil yang ditumpuk di sisi kiri pada 1.0. Dalam hal ini, akan ada masalah besar ketika browser disetel untuk tidak melakukan cache secara lokal. Dibutuhkan banyak waktu dan sumber daya server untuk memuat banyak gambar kecil ini, jadi saya memiliki style sheet baru ini. Solusinya sekarang adalah menggunakan metode style sheet, artinya ada sekitar 2.000 tempat yang memerlukan style sheet untuk merender gambar latar belakang. Saya menguji berbagai situasi dan membandingkannya dengan kode versi 1.0 dan sampai pada kesimpulan bahwa tingkat penggunaan CPU sangat tinggi. Satu-satunya alasan adalah rendering yang memakan waktu. Verifikasinya juga sangat sederhana. Saya menghapus bagian #mtvroot di sisi kiri style sheet di atas, yang berarti menghilangkan hubungan ketergantungan dari style sheet masih cukup besar, 3-5 detik.
Selain itu, saya ganti browser yang berbeda, dan hasil tesnya juga berbeda. Yang paling menjijikkan ada di IE. Misalnya, jika saya memiliki 500 node anak pada node tertentu, saya akan menutupnya (CPU 100%, tunggu 3). -5 detik) , yaitu display="none". Saat ini, jika saya menutup node induk dari node ini (node ini tidak memiliki node saudara lainnya, yaitu node induknya hanya memiliki satu node anak seperti itu) , masuk akal jika hanya ada satu node, Collapse seharusnya langsung terjadi, tetapi hasilnya tidak. Hasilnya adalah CPU 100% selama 3-5 detik objek HTML disembunyikan oleh display="none", induknya Ketika operasi apa pun dilakukan pada level tersebut, IE akan merender ulang objek tersembunyi ini menggunakan style sheet. Saya benar-benar tidak mengerti apa yang dipikirkan oleh pengembang IE.
Saya pergi ke FIREFOX untuk mengujinya lagi. Ketika dilipat (display=none), saya yakin FF tidak lagi memakan energi saat berhadapan dengan benda tersembunyi. Tentu saja, semua browser sama ketika diperluas: CPU 3-5 detik 100%, tetapi FF sedikit lebih cepat.
Melalui fenomena di atas, saya sampai pada kesimpulan: style sheet tidak efisien saat merender secara dinamis; ketika wadah induk mendeteksi perubahan status, hal ini akan menyebabkan style sheet dari semua objek turunannya dirender ulang; Objek noneHidden tidak akan dirender ulang tetapi IE akan melakukannya.
Jadi mengapa masalah efisiensi rendering style sheet ini belum ditemukan sebelumnya? Hei, saat Anda membuat halaman web, Anda jarang melakukan tindakan ekstrem seperti itu. Ada ribuan gambar latar belakang dalam satu halaman yang memerlukan style sheet untuk merender gambar latar belakang. Biasanya hanya ada beberapa tempat atau lusinan tempat, sehingga Anda tidak dapat merasakan efisiensi rendering, Anda juga tidak dapat merasakan perbedaan antara browser yang berbeda dalam hal ini. Namun saat membuat kontrol seperti pohon, pasti akan menemui berbagai masalah ekstrim, seperti array data yang besar, jumlah objek HTML yang dihasilkan, dll. Perbedaan efisiensi rendering hanya ketika saya menulis skrip JS ditemui. Hari ini saya membagikan hasil pengujian ini dengan harapan dapat bermanfaat bagi semua orang saat menulis program di masa mendatang dan sebagai pertimbangan saat melakukan desain.
Akhir kata, terima kasih atas penegasan dan dukungannya terhadap kontrol yang saya tulis, terima kasih!