이번 포스팅에서는 Wijmo FlexGrid를 사용할 때 속도를 개선할 수 있는 방법 몇가지를 소개합니다.

FlexGrid의 가상화

Wijmo FlexGrid의 기본 작업은 JavaScript 데이터 객체를 사용자가 상호 작용할 수 있는 DOM 요소로 변환하는 것입니다.

일반적으로 데이터는 수 천개의 항목이 포함된 대규모 배열로 구성되며 각 항목에 대해 DOM 요소를 생성할 경우, 속도 및 성능 저하를 일으키게 됩니다. 이를 해결하기 위해서 Wijmo FlexGrid는 가상화를 통해 데이터의 일부만 추적 및 렌더링하여 document 트리에서 DOM 요소의 수를 줄이고 성능을 크게 향상 시켰습니다. 더불어 FlexGrid는 viewRange 속성을 통해 데이터의 표시 가능한 부분을 나타낼 수 있으며 사용자가 화면의 크기를 조정하거나 그리드를 스크롤할 때마다 viewRange가 업데이트되고 그리드가 하위 DOM 요소를 업데이트합니다.

FlexGrid 속도 개선을 위한 추천 사항

앞서 언급했듯이 FlexGrid 성능은 기본적으로 렌더링 해야 하는 셀 수(즉, 현재 화면에 표시되는 셀의 개수)에 따라 달라집니다. 또한, 높이/너비가 큰 그리드는 FlexGrid가 더 많은 셀을 렌더링해야 한다는 것을 의미하며, DOM 작업의 속도가 느려지기 때문에 성능 향상을 위해 다음과 같이 방법을 추천 드립니다.

1. 그리드에서 가상화하고 보이는 셀 수를 줄이기 위해 그리드의 높이/넓이를 고정

.wj-flexgrid {
	width: 400px;
	height:500px;
}

참고 : PureJS 튜토리얼 데모에 적용된 CSS 정보를 보기 위해서는 아래 첨부된 그림과 같이 코드 상단의 CSS 버튼을 클릭하시면 됩니다.

2. 각 셀의 렌더링 개선을 위해 formatItem/cellTemplate 작업 최소화

formatItem과 cellTemplate은 Wijmo 그리드에 유연한 커스터마이징이 가능하게 하는 강력한 도구이지만 그만큼 그리드의 렌더링 속도를 저하시킬 수 있는 원인이 될 수도 있습니다. 만약 그리드에 속도 문제가 발생한다면 formatItem/celltemplate로 사용자 정의한 셀 컨텐츠의 코드를 줄어보시는 것을 추천 드립니다.

아래에서 formatItem과 cellTemplate에 대해 간단한 설명을 드리오니 참고하시길 바랍니다.

• formatItem formatItem은 셀을 나타내는 요소가 생성될 때 발생하는 Wijmo FlexGrid의 이벤트로 보여질 셀의 서식을 만드는 데 사용이 됩니다. FlexGrid에서 셀을 사용자 정의하는 데 사용되는 포맷터 함수를 가져오거나 설정하는 itemFormatter 속성과 유사하지만 다수의 독립적인 핸들러을 사용할 수 있다는 장점이 있습니다.  아래 코드 스니펫은 그룹행의 셀에서 'wj-wrap' 클래스를 제거하는 코드입니다.

  theGrid.formatItem.addHandler((flex, e) => {
    if (theGrid.rows[e.row] instanceof GroupRow) {
      wijmo.removeClass(e.cell, 'wj-wrap');
    }
  });

아래 예제는 셀 값에 따라 셀 색상을 변경하기 위한 조건부 포맷을 가진 그리드입니다.

위 샘플에서 셀을 커스터마이징하는 formatItem 영역은 아래와 같으며 속도 향상이 필요하신 경우, 아래 코드를 삭제해보시길 바랍니다.

theGrid.formatItem.addHandler(function (s, e) {
   // 열 헤더에 대한 중앙 정렬
   if (e.panel == s.columnHeaders) {
     e.cell.innerHTML = '<div class="v-center">' +
       e.cell.innerHTML + '</div>';
  }
   // "Diff" 열에 대한 커스텀 렌더링
   if (e.panel == s.cells) {
     var col = s.columns[e.col];
     if (e.row > 0 && (col.binding == 'salesDiff' || col.binding == 'expensesDiff')) {
       var vnow = s.getCellData(e.row, e.col - 1), vprev = s.getCellData(e.row - 1, e.col - 1), diff = (vnow / vprev) - 1;
       //셀 서식
       var html = '<div class="diff-{cls}">' +
           '<span style="font-size:75%">{val}</span> ' +
           '<span style="font-size:120%" class="wj-glyph-{glyph}"></span>';
       html = html.replace('{val}', wijmo.Globalize.format(diff, col.format));
       if (diff < 0.01) {
         html = html.replace('{cls}', 'down').replace('{glyph}', 'down');
      }
       else if (diff > 0.01) {
         html = html.replace('{cls}', 'up').replace('{glyph}', 'up');
      }
       else {
         html = html.replace('{cls}', 'none').replace('{glyph}', 'circle');
      }
       e.cell.innerHTML = html;
    }
  }
});

formatItem 구현 방법이 궁금하신 경우, 다음 링크를 클릭하여 확인하시길 바랍니다. 참조 링크 : formatItem을 통한 사용자 정의 셀 생성하기

• cellTemplate cellTemplate은 Column에 데이터 셀의 HTML 컨텐츠를 생성하는데 사용되는 템플릿 문자열을 가져오거나 설정합니다. cellTemplate 속성은 이미지 추가나 조건부 서식과 같은 간단한 설정에 대해서 쉬우면서 표준적인 옵션입니다. 아래 샘플은 cellTemplate으로 커스터마이징한 셀이 있는 그리드입니다.

• ​

위 샘플에서 셀을 커스터마이징하는 cellTemplate 영역은 아래와 같으며 속도 향상이 필요하신 경우, 아래 코드를 삭제해보시길 바랍니다.

  // 셀 템플릿이 있는 그리드 생성
new wijmo.grid.FlexGrid('#theGrid', {
    (...)
        **cellTemplate: '<span class="flag-icon flag-icon-${col.dataMap.getDataItem(value).flag}"></span> ${text}'
      },
      {
       (..)
        cellTemplate: '<span class="color-tile" style="background:${value}"></span> ${value}'
      },
      {
       (...)
        cellTemplate: '<span class=${value > 0 ? "change-up" : "change-down"}>${value}:p0'
      },
    ],
});

cellTemplate 구현 방법이 궁금하신 경우, 다음 링크를 클릭하여 확인하시길 바랍니다. 참조 링크 : CellTemplate을 이용하여 사용자 정의 셀 생성하기

참고

추가적으로 그리드에 불러올 수 있는 데이터의 양은 사용 가능한 메모리, 브라우저, 브라우저 탭에 할당된 메모리 등 시스템의 구성에 따라 제한됩니다. 따라서 대용량 데이터의 경우 클라이언트 측에 데이터를 저장하는 것보다 서버에 데이터를 저장하거나 서버측으로 데이터를 내보내는 것을 추천 드립니다. 이와 관련하여 Wijmo RestCollectionView을 사용해 자체 Rest API에 연결할 수 있으며 원하는 수의 컴포넌트를 바인딩하여 서버에 전체적으로 전달할 수 있습니다. 아래 RestCollectionView 데모를 참고하시기 바랍니다.

이처럼 Wijmo FlexGrid은 가상화를 통해 강력한 그리드를 제공하지만 예기치 못한 속도 문제가 발생하는 경우, 위의 권고 사항에 따라 코드를 수정해보시길 바라며 추가 문의 사항이 있으신 경우 저희 Q&A 섹션을 이용 부탁 드립니다.

• Wijmo - Q&A|토론 게시판