Bagaimana untuk mengoptimumkan operasi tambah gelung jquery?

Question

Terdapat fungsi paparan halaman dalam projek adalah perlu untuk menambah tag kanvas pada teg yang dimiliki oleh kelas yang ditentukan Kerana terdapat fungsi pertanyaan, bilangan tag kanvas yang sepadan mesti ditambah mengikut jumlah data ditanya. Saya sedang menggunakan operasi gelung Mula-mula sembunyikan label kelas yang ditentukan, gunakan tambah untuk menambahkannya pada label kelas yang ditentukan setiap kali ia gelung, dan kemudian paparkan label kelas tersembunyi selepas gelung selesai. Dengan cara ini, apabila jumlah data adalah kecil, masa pemaparan halaman adalah normal, satu saat sudah mencukupi Tetapi selagi jumlah data adalah besar, hampir 300 atau lebih item, ia akan mengambil masa beberapa saat untuk dipaparkan dan. 500 item data akan mengambil masa kira-kira 5 saat , ia mengambil masa lebih daripada sepuluh saat untuk memproses beribu-ribu item.
Oleh kerana saya menggunakan rangka kerja thinkphp, saya pada mulanya ingin menulis tag kanvas ke dalam halaman html dan kemudian menggunakan JS untuk mengubah suai gaya css Namun, kerana tag kanvas perlu dikendalikan oleh id, dan saya perlu menambah banyak daripada teg kanvas, dan id Ia tidak boleh diulang, jadi saya memilih untuk menambahkannya secara dinamik menggunakan js. Saya ingin bertanya kepada pakar adakah mereka mempunyai idea lain untuk menyelesaikan masalah ini? (ps: Saya tidak tahu rangka kerja seperti vue atau bertindak balas. Jika saya mahu menukar ini, saya perlu mempelajarinya dari awal. Saya tidak akan mempertimbangkan untuk membuat semula bahagian hadapan dengan ini buat masa ini)

Answer 1

Ia sama dengan membina nod maya sendiri,

Perjalanan telah berakhir, banyak nod telah disambung bersama, dan lapisan bekas telah dibalut

Lampirkan sekali dan selesai