기본적으로 SpreadJS는 가장 까다로운 엔터프라이즈 애플리케이션 요구사항을 처리 할 수  있는 매우 빠르고 강력한 JavaScript 스프레드시트 컨트롤입니다. 그러나 수만 행의 데이터 처리 및 수천 개의 수식을 지원하는 등 한계를 넘어야 하는 경우가 있을 수 있습니다. SpreadJS는 이러한 기능을 지원하지만 최상의 성능을 얻기 위해 코드를 보다 효과적으로 최적화할 수있는 방법이 있습니다.

이 포스팅에서는 SpreadJS가 코드를 최적화하는 모범 사례를 간략하게 소개하겠습니다.

페인팅 최적화

페인팅은 Spread가 JavaScript 캔버스로 구현되기 때문에 Spread 자체가 새로 고침되는 프로세스입니다. Spread가 변경 될 때마다 Spread.Sheets가 새로 고침되거나 다시 그려집니다. 대부분의 경우에는 문제가 되지 않지만, 동시 변경이 많으면 성능이 크게 저하될 수 있습니다. 하지만, 변경이 완료될 때까지 페인팅을 일시적으로 비활성화하는 기능이 내장되어 있기 때문에, 모든 변경이 완료된 후에만 ​​Spread가 새로 고쳐지도록 설정할 수 있습니다.

suspendPaint 및 resumePaint 메서드로 이런 설정이 가능합니다. 변경 전에 suspendPaint를 사용하고,그 다음 resumePaint를 사용합니다. 

spread.suspendPaint();
for (var i = 0; i < 10000; i++) {
    for (var j = 0; j < 10000; j++) {
        sheet.setValue(i, j, new Date(), GC.Spread.Sheets.SheetArea.viewport);
    }
}
spread.resumePaint();

Spread에서 페인팅 속도를 높이는 방법에 대해 더 자세히 알아볼 수 있습니다.

많은 수식을 사용한 작업

사용자가 수식을 변경하거나 추가하면 Spread.Sheets가 시트를 다시 계산합니다. 그러나 수식을 많이 변경해야 하는 경우, Spread 속도가 느려질 수 있습니다. 계산을 중지하고 시작하려면 수식 변경 전후에 suspendCalcService 및 resumeCalcService 메소드를 사용할 수 있습니다.

sheet.suspendCalcService(true);
for (var i = 0; i < 10000; i++) {
    for (var j = 0; j < 100; j++) {
        sheet.setFormula(i, j, "DATE(2019, 3, 11)", GC.Spread.Sheets.SheetArea.viewport):
    }
}
sheet.resumeCalcService(false);

수식 성능에 대한 자세한 내용은 여기를 참조하세요.

많은 양의 데이터 작업

일반적으로 Spread에 데이터를 추가할 때 개발자는 setValue 메소드를 사용합니다. 그러나 수천 개의 셀에 대해 이 작업을 수행하면 성능이 저하될 수 있습니다. 대신 setArray와 같은 메소드를 사용하면 대량의 셀을 동시에 데이터로 채울 수 있습니다.

var dataArray = [
["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246],
["2018", 0.3260, 0.2638, 0.1828, 0.0367, 0.9721, 0.2732, 0.3762],

];
sheet.setArray(0, 0, dataArray, false);

대용량 데이터 작업에 대한 자세한 내용은 여기를 참조하세요.

계산 함수 최적화

SUM과 같은 일반적인 기능은 대부분 종속 셀 값이 변경 될 때만 변경됩니다. 그러나 INDIRECT, RAND 또는 NOW와 같은 휘발성 함수가 사용되는 경우, 종속성이 있는 셀이 변경되었는지 여부에 관계없이 값이 다시 계산됩니다. 이러한 휘발성 함수를 사용하는 큰 스프레드시트에 성능 문제가 있는 경우 이러한 문제에 영향을 줄 수 있습니다.

한 가지 해결책은 이러한 유형의 함수를 모두 함께 사용하는 것을 피하는 것이지만 스프레드시트에서 이러한 함수를 꼭 사용해야 하는 경우, 휘발성 함수를 중첩하면 성능 문제를 크게 줄일 수 있습니다. 예를 들어, 단일 셀에서 휘발성 함수를 설정한 다음 다른 수식에서 해당 셀의 값을 참조하는 것입니다.

휘발성 함수를 피하는 방법에 대한 자세한 설명을 보려면 여기를 참조하세요.

Firing에 의한 이벤트 중단

Spread.Sheets에서 사용자가 호출하는 작업 및 API는 이벤트를 기반으로 합니다. 여기에는 데이터 변경, 스타일 수정 등이 포함됩니다. 짧은 시간 내에 여러 이벤트가 반복적으로 트리거되므로 중요한 성능 문제가 발생할 수 있습니다. 여기서 suspendEvent 및 resumeEvent 메소드가 유용합니다. 데이터 작업 전후에 이 메소드를 호출하면 성능이 향상 될 수 있습니다. 이 메소드들은 일반적으로 suspendPaint 및 resumePaint 함수 외에도 사용됩니다 .

spread.suspendPaint();
spread.suspendEvent();
for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 10; j++) {
        sheet.setValue(i, j, "111");
    }
}
spread.resumeEvent();
spread.resumePaint();

이벤트 성능에 대한 자세한 내용은 여기를 참조하세요.

많은 양의 데이터 정렬

Spread.Sheets의 기능 중 하나는 변경된 셀 값을 추적하는 것입니다. 이를 통해, 개발자는 셀 수정 및 기타 동작을 제어 할 수 있을 뿐만 아니라 성능에 영향을 줄 수 있습니다. 이는 특히 대량의 데이터를 정렬할 때 일반적일 수 있으며, 이로 인해 이동된 모든 셀 값이 dirty로 표시되기 때문입니다.

성능에 영향을 미치는 것을 막기 위해 suspendDirty 및 resumeDirty 메소드를 사용하여 Spread가 셀의 dirty 상태를 표시하지 않도록 중지하고 시작할 수 있습니다.

spread.bind(GC.Spread.Sheets.Events.RangeSorting, function (sender, args) {
    sheet.supsendDirty();
});

spread.bind(GC.Spread.Sheets.Events.RangeSorted, function (sendder, args) {
    sheet.resumeDirty();
});

작동 방식에 대한 자세한 내용은 여기를 참조하세요.