javascript - jqueryループの追加操作を最適化するにはどうすればよいですか?

Question

プロジェクトにはページ表示機能があり、指定したクラスが属するタグにcanvasタグを追加する必要があります。クエリ機能があるため、量に応じてcanvasタグを対応した数追加する必要がありますクエリされたデータの数。現在ループを使用しています。操作するには、まず指定したクラス ラベルを非表示にし、ループを通過するたびに append を使用して指定したクラス ラベルに追加し、ループの完了後に非表示のクラス ラベルを表示します。このように、データ量が少ない場合、ページのレンダリング時間は通常1秒で十分ですが、データ量が多くなり、300件以上になると、レンダリングに数秒かかります。 500 項目のデータには約 5 秒かかりますが、数千項目の処理には 10 秒以上かかります。
thinkphpフレームワークを使用しているため、当初はhtmlページにcanvasタグを記述し、JSでcssスタイルを修正したいと考えていましたが、canvasタグはidで操作する必要があるため、 Canvas タグがたくさんあり、ID は重複できないため、js を使用して動的に追加することにしました。専門家に聞きたいのですが、この問題を解決する別のアイデアはありますか? (追記: vue や React のようなフレームワークを知りません。これらを変更したい場合は、一から学ばなければなりません。今のところ、これらを使用してフロントエンドをやり直すことは考えていません)

Answer 1

仮想ノードを自分で構築するのと同じです

トラバースが終了し、多くのノードが結合され、コンテナーの層がラップされました

一度追加すれば完了です