[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

점진적 로딩

데이터의 양에 따라 매우 큰 파일을 로드하는 데 시간이 오래 걸리거나 브라우저의 처리 한계에 도달할 수 있습니다. 따라서 데이터나 수식이 많이 포함된 대용량 파일을 로드할 때는 데이터 처리 시간을 단축하고 로딩 성능을 최적화하기 위해 점진적 로딩(incremental loading) 기능을 사용하는 것이 권장됩니다.

점진적 로딩 기능은 먼저 활성 시트의 일부 데이터만 로드하고, 나머지 수식, 셀 값, 사용자 지정 이름 등의 데이터를 백그라운드에서 순차적으로 로드합니다. 데이터를 로드할 때 fromJSON 함수를 사용하면, 옵션에서 incrementalLoading을 true로 설정하여 사용할 수 있습니다.

또한 incrementalLoading 옵션에 콜백 함수를 설정하면 로딩 상태를 확인할 수 있으며, 해당 콜백의 매개변수를 통해 시트 이름, 현재 테마 등 시트 관련 정보를 확인할 수 있습니다. 로딩 완료 후 수행할 다음 작업도 설정할 수 있습니다.

추가로, 데이터를 로드한 후 셀 값을 다시 계산할지 여부는 doNotRecalculateAfterLoad를 false로 설정하여 지정할 수 있습니다.

참고: 데이터 로딩 중 UI 이벤트가 발생하면, SpreadJS는 먼저 해당 이벤트를 처리한 후 나머지 데이터를 로드합니다.

아래 예제는 JSON 파일을 워크시트에 점진적으로 로드하며, 시트 이름을 로드 중에 콘솔 로그에 출력하는 방식입니다.




다음 코드 예제는 점진적 로딩을 사용하여 JSON 파일을 로드하는 방법을 보여줍니다.

var loadingStatus = new LoadingStatus('LoadingStatus', { tipText: 'LoadingStatus' });
statusBar.add(loadingStatus);

var incrementalEle = document.getElementById("incremental");
function fromJSON(json) {
    if (incrementalEle.checked) {
        spread.fromJSON(json, {
            doNotRecalculateAfterLoad: true,
            incrementalLoading: {
                loading: function (progress, args) {
                    progress = progress * 100;
                    document.getElementById("statusBar").innerText = "Loading: " + progress.toFixed(2) + "%";
                    loadingStatus.updateProgress(progress);
                    console.log(progress, args.sheet.name());
                },
                loaded: function () {
                    document.getElementById("statusBar").innerText = "Finish";
                }
            }
        });
    } else {
        spread.fromJSON(json);
        loadingStatus.updateText("Ready");
    }
}