ActiveReportsJS 보고서 렌더링 성능 개선을 위한 5가지 팁

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-10-11 14:14 조회 572회 댓글 0건

본문

관련링크

ActiveReportsJS는 브라우저에서 보고서를 렌더링하고, 내보내고, 인쇄할 수 있는 완전히 클라이언트 측에서 구동되는 보고 솔루션입니다. 서버 측에서는 JSON 형식의 보고서 데이터만 검색합니다. 데이터 양이 합당한 수준이라면 보고서가 빠르게 렌더링됩니다.

하지만 예를 들어 보고서를 많은 양의 데이터에 바인딩하여 요약 보고서를 대시보드 스타일로 표시하려는 경우를 가정해 보겠습니다. 이러한 경우 보고서 렌더링 성능을 개선하기 위해 사용할 수 있는 여러 가지 팁과 노하우를 설명합니다. 100,000개 레코드에서 빌드한 요약 정보를 표시하는 보고서에 대한 대시보드 레이아웃 데모를 확인해 보세요.

팁 1: 압축된 데이터 검색

서버에서 JSON 형식 데이터를 검색할 때 gzip 압축이 활성화되어 있는지 확인합니다. JSON 데이터는 압축률이 매우 높습니다. 예를 들어, 앞서 언급한 대시보드 레이아웃 샘플에서 JSON 데이터 소스의 크기는 13MB이지만 네트워크를 통해서는 720KB만 전송됩니다. 웹 서버 설명서에서 gzip 압축을 활성화하는 방법을 참조하시기 바랍니다.

팁 2: 필요한 정보만 검색

JSON 데이터 소스의 각 객체에는 일반적으로 많은 필드가 있습니다. 서버 측에서 데이터를 검색할 때 보고서에서 실제로 사용되는 필드만 포함하고 있는지 확인합니다. 이를 확인하는 정확한 방법은 데이터 API의 세부 정보에 따라 달라집니다. 예를 들어, OData API는 각 객체에 대해 제한된 필드를 검색하도록 허용하는 $select 쿼리를 지원합니다.

또한 데이터 API가 서버 측 데이터 필터링을 지원하는 경우 클라이언트 측에서 처리해야 할 정보의 양이 크게 줄어 렌더링 성능을 개선할 수 있습니다. 동적 데이터 바인딩 블로그 게시물에서는 서버 측 데이터 필터링을 구현하기 위한 다양한 제안 사항을 찾아볼 수 있습니다.

팁 3: 날짜 부분을 개별적으로 검색

JSON 형식에는 "Date" 유형이 없고 날짜는 문자열로 직렬화되어 있습니다. 보고서에서 날짜의 개별 부분(Year, Month 또는 Day)을 사용하는 경우 ActiveReportsJS에서 날짜 문자열을 구문 분석한 다음 필요한 부분을 추출해야 합니다. 날짜 값이 매우 많은 경우 이러한 작업에는 비용이 많이 소요될 수 있습니다. 날짜 구문 분석 비용을 줄이기 위해 데이터 API는 문자열로 직렬화된 Date 객체 대신 필요한 날짜 부분을 검색할 수 있습니다.

예를 들어, 앞서 언급한 대시보드 레이아웃 샘플에서 데이터 소스의 각 개체에는 해당 날짜의 "Year" 및 "Quarter" 부분이 포함되어 있습니다. "Year" 필드는 세로 막대형 차트 데이터를 그룹화하는 데 사용되고 "Quarter" 필드는 오른쪽에 표의 추세선을 그룹화하는 데 사용됩니다.

{
  "Amount": 1544.4,
  "Year": 2007,
  "Quarter": 20071,
  "Category": "Cameras and camcorders",
  "Region": "Europe"
}

팁 4: 런타임 데이터 바인딩 사용

보고서 데이터를 필터링하는 일반적인 방법은 동적 데이터 바인딩 블로그에서 설명하는 것처럼 보고서 매개 변수를 사용하는 것입니다. 그러나 사용자 정의 UI 응용 프로그램 경로를 사용하여 필터가 설정된 경우 런타임 데이터 바인딩 기능을 사용할 수 있습니다. 보고서 정의는 JSON 객체입니다. 또한 JSON 형식의 데이터를 포함할 수도 있습니다. 따라서 응용 프로그램의 코드가 데이터를 가져온 다음 보고서로 푸시할 수 있습니다.

이러한 접근 방식에는 응용 프로그램의 코드가 데이터 가져오기를 완전히 제어하여 SWR 등과 같은 라이브러리를 사용해 데이터 캐싱, 유효성 재검사를 처리하고 추적, 간격을 두고 다시 가져오기 등에 집중할 수 있다는 이점이 있습니다.

팁 5: 복잡한 식 피하기

ActiveReportsJS는 여러 함수 및 연산자를 포함하는 다양한 식 언어를 제공합니다. 피연산자를 위한 중첩 식을 포함하고 있는 Switch 연산자를 통해 매우 복잡한 식을 확실하게 사용할 수 있습니다. 그러나 데이터의 양이 많은 경우 이러한 식의 평가에는 비용이 많이 들 수 있습니다. 따라서 가능한 경우 이러한 식의 결과는 서버 측에서 (예를 들어, SQL 쿼리로) 계산한 다음 주 데이터 내에 포함하십시오.

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!