Foxit Developer

Best practices ​

Foxit PDF SDK for Web runs in the browser sandbox. Site setup and SDK configuration strongly affect performance. This section covers web asset optimization and recommended SDK settings.

Web asset optimization ​

Gzip and Brotli compression ​

Compression reduces download size and time. Sizes for UIExtension.css and UIExtension.full.js:

FileOriginalAfter GzipAfter Brotli
UIExtension.css1.2M213kb156kb
UIExtension.full.js2.6M534kb443kb

NOTE

Brotli often compresses better than gzip, but not all browsers decode Brotli natively (for example, Internet Explorer). In IE, Brotli decompression uses JavaScript, which can offset the benefit and slow initial load.

Cache ​

Cache static assets to avoid repeated downloads. Cache the SDK /lib and /external font files. See Google and Mozilla on HTTP caching.

SDK configuration ​

Read-only mode ​

Use read-only mode when you need faster rendering and do not edit the document.

Use cases:

  • Complex PDFs from CAD
  • High page render speed requirements
  • View-only workflows

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        / ...
        viewerOptions:
                {
                    customs: {
                        getDocPermissions: function () {
                            return 0;/ 0 means ReadOnly 
                        }
                    }
                    / ...
                }
    )
</script>

Or:

html
<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        / ...
        customs:
                {
                    getDocPermissions: function () {
                        return 0;/ 0 means ReadOnly 
                    }
                }
        / ...
    })
</script>

Brotli compression ​

The SDK core is an Emscripten wasm/asm module (~8M / ~13M). Load time depends on the browser. The module uses Brotli by default; IE and some older browsers do not support native Brotli—see caniuse. JavaScript decompression in those browsers can reduce the benefit.

Test with Brotli enabled and disabled to choose the best setting.

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        / ...
        viewerOptions:
                {
                    jr: {
                        brotli: {
                            core: false / true enables Brotli; false disables it (default true).
                        }
                    }
                }
        / ...
    })
</script>

Or:

html
<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        / ...
        jr:
                {
                    brotli: {
                        core: false / true enables Brotli; false disables it (default true).
                    }
                }
        / ...
    })
</script>

Preload WebAssembly artifacts ​

From 7.1.1, preload-jr-worker.js preloads the web worker and wasm/asm to reduce time to first render.

Sample code:

html
<body>

<div id="pdf-ui"></div>

<script>
    var licenseSN = "Your license SN";
    var licenseKey = "Your license Key";</script>

<!--Addthepreload-jr-worker.js-->

<script src="./lib/preload-jr-worker.js"></script>

<script>var readyWorker = preloadJrWorker({
    workerPath: './lib/',
    enginePath: './lib/jr-engine/gsdk',
    fontPath: './external/brotli',
    licenseSN: licenseSN,
    licenseKey: licenseKey
})</script>


<script src="./lib/UIExtension.full.js"></script>

<script>
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: './lib',/thelibrarypathofwebsdk.
            jr: {readyWorker: readyWorker,}
        }, renderTo: '#pdf-ui',/thediv(id="pdf-ui").
        appearance: UIExtension.appearances.adaptive, addons: ['```']
    });
</script>
// ...

Tiling size ​

NOTE

From 8.5, the Web SDK no longer uses tileSize rendering. The following applies only to versions before 8.5.

The SDK rasterizes pages during render. Very large pages render slowly. For large pages, enable tileSize mode (500–3000px). Internal tests often favor 1200px, but optimal values depend on the document. Try values such as 200 or 3600 in your environment.

Use cases:

  • Complex documents with very large pages

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        / ...
        viewerOptions:
                {
                    tileSize: 1200,
                    / ...
                }
        / ...
    })
</script>

Or

sh
<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        / ...
        tileSize:1200,
        / ...
    })
</script>

Zoom ​

On desktop, the SDK opens PDFs with fit-width (fitWidth) by default; on mobile, actual size is default. With fit-width, showing or hiding the left toolbar resizes the viewport and re-renders pages, which hurts performance. Consider actual-size zoom when the toolbar toggles often.

Rendering mode ​

From 8.5, annotRenderingMode is deprecated. The SDK uses native mode (WebAssembly) for annotations and form controls. Native rendering is optimized for quality and speed; canvas rendering mode is no longer needed.

Document loading ​

Synchronous loading ​

Synchronous loading fetches the full file binary before open—a balance of memory and speed. Recommended for documents between about 50MB and 500MB.

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script src="path/to/allInOne.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({/ ...
    })
    var blob = getBlob();
    pdfui.openPDFByFile(blob)
</script>

Asynchronous loading ​

Asynchronous loading fetches only the ranges needed. Use when files exceed ~500MB, cannot fit in memory, or you need only part of the document.

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({/ ...
    })
    pdfui.openPDFByHttpRangeRequest({
        range: {
            url: '../../../docs/FoxitPDFSDKforWeb_DemoGuide.pdf',
        }
    })
</script>

Load from in-memory arrayBuffer ​

Loading from arrayBuffer stores the full stream in wasm/asm memory. Best for smaller local files (under ~500MB) or when the full stream is available quickly. Pass getLoadingMode() in the PDFUI constructor; return 1 to use arrayBuffer loading.

Sample code:

html
<script src="path/to/UIExtension.full.js"></script>
<script>
    var pdfui = new UIExtension.PDFUI({
        / ...
        customs:
                {
                    getLoadingMode: function (file) {
                        return 1
                    }
                }
        / ...
    })
</script>

If you implement a custom file open control:

javascript
var pdfui = new UIExtension.PDFUI({
    /...
})
//... event bind context
{
    var arrayBuffer = getArrayBuffer();
    pdfui.openPDFByFile(arrayBuffer);
}
// ...