Im Projekt gibt es eine Seitenanzeigefunktion. Es ist notwendig, den Tags, zu denen die angegebene Klasse gehört, Canvas-Tags hinzuzufügen. Da es eine Abfragefunktion gibt, muss entsprechend der Datenmenge eine entsprechende Anzahl von Canvas-Tags hinzugefügt werden abgefragt. Ich verwende derzeit eine Schleifenoperation. Verstecke zuerst die angegebene Klassenbezeichnung, füge sie bei jeder Schleife mit „append“ zur angegebenen Klassenbezeichnung hinzu und zeige dann die ausgeblendete Klassenbezeichnung an, nachdem die Schleife abgeschlossen ist. Auf diese Weise ist die Renderzeit der Seite normal, eine Sekunde reicht aus. Solange die Datenmenge jedoch groß ist, fast 300 oder mehr Elemente, dauert das Rendern mehrere Sekunden Die Verarbeitung von 500 Datenelementen dauert etwa 5 Sekunden, die Verarbeitung von Tausenden von Datenelementen dauert mehr als zehn Sekunden.
Da ich das Thinkphp-Framework verwende, wollte ich zunächst das Canvas-Tag in die HTML-Seite schreiben und dann JS verwenden, um den CSS-Stil zu ändern, da das Canvas-Tag jedoch über die ID bedient werden muss und ich viel hinzufügen muss von Canvas-Tags und der ID Es kann nicht wiederholt werden, daher habe ich mich dafür entschieden, es dynamisch mit js hinzuzufügen. Ich möchte die Experten fragen, ob sie noch andere Ideen zur Lösung dieses Problems haben? (Ps: Ich kenne keine Frameworks wie Vue oder React. Wenn ich diese ändern möchte, muss ich sie von Grund auf lernen. Ich werde vorerst nicht daran denken, das Frontend damit zu überarbeiten.)