I am facing huge performance issues in loading large pdf documents (around 30/40 MB) using pdf.js I am new to the ways it works and read a lot about it , but nothing helped.

Following is my code samples. In HTML file

<div id="divCanvasTemplate">
    <div id="divCanvasContainer-{pageIndex}" class="canvas-container">
        <canvas id="cnvDesigner-{pageIndex} class="canvas-designer"></canvas>
    </div>
</div>

In JS file , I have the following method.

var _loadFile = function() {
    var pdfjsLib = window['pdfjs-dist/build/pdf'];
    pdfjsLib.GlobalWorkerOptions.workerSrc = _workerUrl;

    $ajax({
        url: "GEtPDFFileBytes",
        type: "GET",
        data: {
            "documentid": _documentId
        },
        success: function(result) {
            var raw = atob(result);
            var loadintask = pdfjsLib.getDocument({
                data: raw
            });

            loadingtask.promise.then(function(pdfDoc_) {
                _pageCount = pdfDoc_._pdfInfo.numPages;
                _currentpageNumber = _getbasePage();
                var canvasTemplate = $("#divCanvasTemplate").html();
                var activeRange = _getActiveRange(_currentpageNumber);

                for (let pagenumber = 1; pagenumber <= _pagecount; pagenumber++) {
                    var canvashtml = canvasTemplate.replace(/pageindex}/g, pagenumber);
                    $("#divMasterCanvas").append(canvasHtml);
                    pdfDoc = PdfDoc_;
                    renderPDFPage(pageNumber);
                }
            });
        }
    });
}
}

function renderPDFPage(num) {
    pdfDoc.getPage(num).then(function(page) {
            var currentpagenumber = page._pageindex + 1;
            var viewport = page.getViewPort({
                scale: scale
            });
            var canvas = document.getelementbyid('cnvDesigner-' + currentpagenumber);
            var context = canvas.getcontext('2d');

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var rendercontext = {
                canvasContext: context,
                viewport: viewport
            };

            var rendertask = page.render(rendercontext);
        }
    });
}

I read about using getImageData() and putImageData() in context to use in such scenario, but unable to get it work. Any help would be greatly appreciated.