동적 태그[dom]에 의해서 웹 페이지가 버벅거릴 수 있는지

Question

지금 회사 프로젝트 A/S 해야하는데, 상황을 보니까 조회 버튼을 클릭하면 Ajax 통신으로 DB에서 8개의 컬럼을 가진 606건의 데이터를 table 태그의 tr td 형태로 동적으로 생성되어 적용되는 방식이더라고요. 그런데 문제가 100건 정도 받아서 dom으로 생성되서 적재되면, 서비스 이용하는데 버벅거림이 없는데, 한 500건 이상 생성되면 웹 페이지 자체가 버벅거리더라고요.버벅거린다는 말이마우스 hover 애니메이션이 바로 안나오고요.특정 버튼 클릭하는데 바로 반응이 안되고 한 1~2초 있다가 되는 지연 현상이 있습니다. 일단 제가 개발한게 아니라서, 정확한 이유는 모르겠으나, 지금 현상이 브라우저 안에서 나오는 현상이라(폐쇄망이라 구 크롬 버전이긴 합니다.), 프론트쪽 문제인거 같긴 하거든요? 일반적인 html5 기반의 프로젝트( react, vue 없음)이고, 606건의 데이터를 수행하고 태그가 생성되면 대략 5,500개 정도의 태그가 동적으로 생성이 되요. 그 안에는 일단은 style&#61; 값으로 background-color로 스타일링이 되고, :hover효과는 css로 적용되는 듯 합니다. 어디가 원인인지 모르겠습니다. 1. 단순하게 동적으로 생성된 태그가 많아서 그런건지 (더 큰 프로젝트도 많을텐데..) 2. CSS가 html 내에서 스타일링 되는게 많아서 개별 처리량이 많아서 그런건지.. 3. 아니면 브라우저가 구 버전이어서 그런건지. (PC 성능 보니까 PC가 안좋은건 아닌거 같습니다.) 원인 파악 못하면 일단 페이징 처리 추가할 생각입니다. (그렇게 편리할거 같진 않아요..)

codezzzz · Accepted Answer

브라우저에 보이는 영역만 페인트할 필요가 있어보이네요. https://stackoverflow.com/questions/19498068/how-to-get-on-screen-visible-element-objects-in-jquery

조오오오용 · Answer

개발자 도구에서 네트워크 응답속도를 보고 응답속도가 ms 단위면 페이징처리를 하시면 될 것 같습니다

짬굉이 · Answer

음..500건이라 사실 div가 500건생겨도 버벅거리진않아요 그릴때 오래걸릴순있어도마우스오버할때 애니메이션이 안나온다라...혹시 $(dom).hover 이런식으로 구현하셧으면버벅일수있습니다. 그런상황이면 페이징이나 가상스크롤링을 통해 구현해야할수도있습니다

초무쿤 · Answer

단순 dom생성이 아니리 아마 이벤트가 걸린 dom이면 그럴수 있어요.

동적 태그[dom]에 의해서 웹 페이지가 버벅거릴 수 있는지

4개의 답변

#css3 목록