! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

FlexGrid 화면 렌더링 성능 문의 > Q&A | 토론

본문 바로가기

ReactJS FlexGrid 화면 렌더링 성능 문의

페이지 정보

작성자 토끼바람 작성일 2021-06-14 09:55 조회 3,758회 댓글 0건
제품 버전 : 5.2011.781
컨트롤 이름 : FlexGrid

본문

안녕하세요.. 대용량 데이터를 화면에 렌더링 하는 문제로 문의 드립니다.

테스트 환경 

데이터 량 : Row : 55,000 / col : 432

브라우저 : Chrome 91.0.4472.101 64bit

해상도 : 1620 * 900


grid 만 있고 화면에 표시하고 있는 내용은 없음


1차 : 테스트 시간 : 20,000건 화면 표시 시간 : 22초

2차 : 테스트 시간 : 18,000건 화면 표시 시간 : 20초


--------------------------------------------------------------------

문의 사항

1. 브라우저 크기가 변경되었을때 렌더링을 다시하는듯 한데 다시 그리는 속도가 느려서 화면에 멈춰보임

2. 스크롤을 할때 데이터가 표시되지 않고 있음

3. 55,000건 조회 후 화면에 노출 할 때 5분이 되도록 화면에 표시되는 내용이 없음


화면의 크기(해상도)에 따라서 성능차이가 많이 나는듯합니다. 개선할 방법이 있을까요?

즉 . 전체적으로 모든데이터를 표시하려니 시간이 오래 걸리는듯합니다.

따라서 화면에 보여지는 부분만 렌더링 할 수 있는 방법이 있는지요? 

--------------------------------------------------------------------

샘플 소스와 비교해서 차이점을 확인해보니 CSS에 높이를 지정하지 않았을때 성능적 이슈가 발생하는듯합니다.

높이를 1000px로 지정하고나서 확인해보니 되는 것 처럼 보이는데

스타일 지정관련이 있는지 문의드립니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

2 답변

ReactJS Re: FlexGrid 화면 렌더링 성능 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2021-06-14 11:51 댓글 0건

본문

안녕하세요 그레이프시티입니다.



해당 문의와 관련하여 먼저 Wijmo FlexGrid는 자바스크립트 데이터 객체를 사용자가 조작할 수 있는 DOM요소로 변환합니다. 다만, 단순한 DOM 요소 변환은 속도를 저하시키기 때문에, 가상화를 통해 뷰에 표시되는 데이터 부분 만을 추적 및 렌더링하여 성능을 향상 시키고 있습니다. 

공유해주신 정보 덕분에 저희 쪽에서 해당 이슈가 확인이 되었고 CSS를 통해 그리드의 높이를 일정 이상 설정 시, 뷰에 보이는 데이터 부분 즉 변환해줘야 하는 요소가 많아 성능 저하를 일으키는 것이 아닌지 추측됩니다. 

다만, 더 정확한 원인 파악 및 해결을 위해서 본사 개발팀에게 보고 드릴 예정이며 관련하여 업데이트 되는 사항에 있는 대로 최대한 빠르게 안내 드리도록 하겠습니다. 답변이 늦어지는 점 죄송합니다.


다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다


댓글목록

등록된 댓글이 없습니다.

ReactJS Re: FlexGrid 화면 렌더링 성능 문의

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2021-06-16 09:40 댓글 0건

본문

안녕하세요 그레이프시티입니다.


본사 개발팀과 함께 확인해본 결과, FlexGrid 성능은 기본적으로 렌더링 해야 하는 셀 수(즉, 현재 화면에 표시되는 셀 수)에 따라 달라집니다. 높이/너비가 큰 그리드는 FlexGrid가 더 많은 셀을 렌더링해야 한다는 것을 의미하며, DOM 작업의 속도가 느려지기 때문에 성능 향상을 위해 항상 다음 사항을 추천 드립니다.


1) 그리드가 셀을 가상화하고 보이는 셀 수를 줄이기 위해 그리드의 높이/넓이를 고정으로 지정

2) 각 셀의 렌더링을 개선하기 위해 formatItem/template 작업을 줄어보기


위와 같은 설정을 해보시고 동일한 문제가 나타나는 지 확인 부탁 드립니다.


다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.