# Best Practice

Foxit PDF SDK for Web FoxitPDFSDK for Web) runs in a browser sandbox in a network environment. Choosing a correct website operation scheme and FoxitPDFSDK for Web configuration can make FoxitPDFSDK for Web run faster. The following section give references on website operation optimization and FoxitPDFSDK for Web configuration.

# Website assets optimization

# Gizp and Brotli compression

Compression is a way to shrink the assests size and reduce the downloading time. The following table shows the compressed size using gzip and brotil on UIExtension.css and UIExtension.full.js.

File Original size Gzip Brotli
UIExtension.css 1.2M 213kb 156kb
UIExtension.full.js 2.6M 534kb 443kb

NOTE: Although the brotli compression algorithm provided by Google is superior to gzip in compression ratio. But brotli is not natively supported by all browsers, such as Microsoft's IE. Decompression of brotli in IE requires the use of a JavaScript engine. This time-consuming process offsets the advantages of Brotli and consumes website loading performance.

# Cache

Caching resource files can avoid dowloading the same assests again and again. The /lib library in the SDK and the font files in /external are recommended for front-end caching. To learn more, check out Google and Mozilla for HTTP cache.

# FoxitPDFSDK for Web configuration

# Read only

If the following scenario is your current needs, it is recommended that you load the FoxitPDFSDK for Web read-only to improve rendering performance.

Applicable scenario:

  • complex PDF documents generated by CAD
  • page rendering speed is high preference
  • no page editing requirements

Code Example:

<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

<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 core of FoxitPDFSDK for Web is the wasm / asm module compiled by emscripten. The module size is 8M / 13M, and the loading time varies depending on the browser performance. These two modules are compressed using Brotli by default. But Brotli is not natively supported by all browsers, such as Microsoft's IE, click here to see the browser support for Brotli. Decompressing brotli in IE needs to use the browser's JavaScript engine. This process takes time, and may offset the advantages of Brotli and then result a performance penalty.

It is recommended that you select the most suitable configuration by enabling and disabling Brotli in your test environment.

Code Example:

```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,// the default value is true which means to enable brotli,false means no brotli compression
                }
            }
        ...
    })
</script>
```

or

```html
<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        jr: {
            brotli:{
                core:false,// the default value is true which means to enable brotli,false means no brotli compression
            }
        }
        ...
    })
</script>
```

# Preload webassembly artifacts

Starting from version 7.1.1, FoxitPDFSDK for Web provides a script file "preload-jr-worker.js" to fetch the wasm/asm artifacts to be loaded in parallel with other front-end resources, this can greatly save document rendering time.

Code Example:

<body>
    <div id="pdf-ui"></div>
    <script>
        var licenseSN = "Your license SN";
        var licenseKey = "Your license Key";
    </script>

    <!-- Add the preload-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', // the library path of web sdk.
                jr: {
                    readyWorker: readyWorker,
                }
            },
            renderTo: '#pdf-ui', // the div (id="pdf-ui").
            appearance: UIExtension.appearances.adaptive,
            addons: [
                '```'
            ]
        });
        ...

# Tiling size

FoxitPDFSDK for Web performs raster scan when rendering the page. If the currently rendered page layout is too large, the rendering speed of the page will be extremely slow. It is recommended that you enable tileSize rendering mode when opening this large page layout. Currently, the supported tileSize range is 500-3000px. In our internal comprehensive test, the rendering speed is optimal with the tileSzie being set as 1200px. But It may vary with your document complex. You can set different tileSize such as 200, 3600, and etc. in your test environment according to the needs of the actual scenario to obtain the most suitable configuration scheme.

Applicable scenario:

  • Complex documents with large page layout

Code Example:

<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

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

# Tiling size and zoom

FoxitPDFSDK for Web opens PDF with fitWdith by default. For large but simple documents, fitWidth zoom ratio improves rendering speed. However,for CAD type of documents with large layout and objects on a page, fitWith may slow down the page rendering on the contrary. That is because there are more page objects are required to render in the same height of viewport -- see example below. For this type of document, the solution we recommend is to reduce the rendering object by adjusting the page zoom ratio and tileSize, thus increasing the rendering speed. You can do test in your environment to get the most appropriate configuration for your actual scenario.

Example

Take the visual range of 800 * 600, page object 3000 * 4000, and tileSize 200 as an example, let's see how many page objects are required to render in the different zoom ratios.

Zoom Origin of CoordinateSpace Page Objects
fitWidth the top-left corner 3000*2400
0.5 the top-left corner 1600*1200
1 the top-left corner 800*600

Code Example:

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        defaultScale = '0.5',// or '1'
        tileSize:200,
        ...
    })
</script>

# Rendering mode

PDF has a feature of high fidelity, that may compromise performance speed. To balance speed and high fidelity, FoxitPDFSDK for Web provides two rendering modes for partial annotations and forms: native (fidelity mode) and canvas (quick mode).

  • native: Uses the WebAssembly as the rendering engine, that requires a higher performance than canvas rendering.
  • canvas: Uses HTML canvas as the rendering engine, which has some distortion in appearance, but more faster and interactive. The distortion is not perceptible to users in most cases. If you have high speed requirements, this mode is your choice.

Currently,the annotations and form widgets that support switching render mode are listed below:

  • Note
  • Highlight
  • FileAttachment
  • Sound
  • PushButton
  • RadioButton
  • CheckBox
  • TextField
  • comboBox

Code Example:

<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
    var pdfviewer = new PDFViewCtrl.PDFViewer({
        ...
        annotRenderingMode:{
            highlight: 'canvas',  
            choiceButton:'canvas', 
            pushButton:'native', 
            textField:'native', 
            sound:'canvas', 
            fileAttachment:'canvas', 
            note:'canvas', 
        }
        ...
    })
</script>

# Document loading

# Synchronous loading

Synchronous loading is to first obtain the complete binary stream of the file for loading, which is a compromised way of memory and performance. For documents between 50M and 500M, this method is recommended.

**Code Example:**

```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 does not require a complete file stream, only the required part is obtained during loading. When the file is too large (greater than 500MB) and cannot be put in memory at all, or when you only need to request part of the document at a time, it is recommended to load the document in this way to get a good performance experience.

**Code Example:**

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

# Loading document from memorry arrayBuffer

Loading from arrayBuffer is to store the entire file stream to and load from in wasm/asm memory. For small local documents (less than 500MB) , or when the entire document stream can be obtained in a short time, it is recommended to load in this way. This method has the advantages of high reading efficiency and fast loading speed.  To enable this method, pass in the callback function getLoadingMode () at the time of constructing the PDFUI. When it returns 1, it means that it is loaded from memorry arrayBuffer.

**Code Example:**

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

If you has implemented your own file open control, you can use the following method to load:

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