There is a page display function in the project. It is necessary to add canvas tags to the tags to which the specified class belongs. Because there is a query function, a corresponding number of canvas tags must be added according to the amount of data queried. I am currently using a loop. To operate, first hide the specified class label, use append to add it to the specified class label each time through the loop, and then display the hidden class label after the loop is completed. In this way, when the amount of data is small, the page rendering time is normal, one second is enough. But as long as the amount of data is large, almost 300 or more items, it will take several seconds to render. 500 items of data will take about 5 seconds. , it takes more than ten seconds to process thousands of items.
Because I use the thinkphp framework, I initially wanted to write the canvas tag into the html page and then use JS to modify the css style. However, because the canvas tag needs to be operated by id, and I need to add a lot of canvas tags, The ID cannot be repeated, so I chose to add it dynamically using js. I would like to ask the experts if they have any other ideas to solve this problem? (ps: I don’t know frameworks like vue or react. If I want to change these, I have to learn them from scratch. I won’t consider redoing the front-end with these for now)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It’s equivalent to building a virtual node yourself,
The traversal is over, a lot of nodes have been spliced together, and a layer of containers has been wrapped
Append once and it’s done