프로젝트에 페이지 표시 기능이 있는데, 지정한 클래스가 속한 태그에 캔버스 태그를 추가해야 합니다. 쿼리 기능이 있기 때문에 데이터 양에 따라 해당 개수의 캔버스 태그를 추가해야 합니다. 현재 루프 작업을 사용하고 있습니다. 먼저 지정된 클래스 레이블을 숨기고 루프할 때마다 이를 지정된 클래스 레이블에 추가한 다음 루프가 완료된 후 숨겨진 클래스 레이블을 표시합니다. 이런 방식으로 데이터 양이 적을 경우 페이지 렌더링 시간은 보통 1초이면 충분합니다. 그러나 데이터 양이 크면(거의 300개 이상의 항목) 렌더링하는 데 몇 초가 걸립니다. 500개 항목의 데이터를 처리하는 데 약 5초가 소요되며, 수천 개의 항목을 처리하는 데 10초 이상이 소요됩니다.
thinkphp 프레임워크를 사용하기 때문에 처음에는 html 페이지에 캔버스 태그를 작성하고 JS를 사용하여 CSS 스타일을 수정하려고 했습니다. 그러나 캔버스 태그는 ID로 작동해야 하기 때문에 많은 것을 추가해야 합니다. 캔버스 태그와 ID는 반복될 수 없으므로 js를 사용하여 동적으로 추가하기로 선택했습니다. 전문가들에게 이 문제를 해결하기 위한 다른 아이디어가 있는지 묻고 싶습니다. (ps: 저는 vue나 React 같은 프레임워크를 모릅니다. 이것을 바꾸고 싶다면 처음부터 배워야 합니다. 지금은 이것들로 프런트 엔드를 다시 하는 것을 고려하지 않을 것입니다)