# # 最佳实践

Foxit PDF SDK for Web 在网络环境的浏览器的沙盒中运行。选择正确的网站操作方案和 Foxit PDF SDK for Web 配置方案可以提高 Foxit PDF SDK for Web 的运行速度。本节将提供有关网站操作优化和 Foxit PDF SDK for Web 配置的参考说明。

## # 网站资源优化

### # Gizp 和 Brotli 压缩

压缩可以缩小资源体积大小和减少下载时间。下列表格显示了在 `UIExtension.css` 和 `UIExtension.full.js` 上使用 gzip 和 brotil 压缩后的大小。

文件 | 原始大小 | Gzip 压缩后的大小 | Brotli 压缩后的大小
--- | --- | --- | ---
UIExtension.css | 1.2M | 213kb | 156kb
UIExtension.full.js | 2.6M | 534kb | 443kb

备注: 虽然 Google 提供的 brotli 压缩算法在压缩率上比 gzip 更有优势，但是 brotli 并非所有浏览器都原生支持，比如微软的 IE 浏览器。IE 中 brotli 的解压需要使用 JavaScript 引擎。这种耗时的过程抵消了 brotli 的优势，并降低了网站的加载性能。

### # Cache

缓存资源文件可以避免反复下载相同的资源。建议将 SDK 包中的 /lib 库和 /external 字体文件作为前端缓存。需要了解更多信息，请查阅 Google
(opens new window) 和 Mozilla
(opens new window) 的 HTTP 缓存。

## # Foxit PDF SDK for Web 配置

### # 只读模式

如果您当前的需求如以下场景，建议您以只读方式加载 Foxit PDF SDK for Web，从而提高渲染性能。

应用场景：

- 由 CAD 生成的复杂的 PDF 文档
- 页面渲染速度要求高
- 不需要对页面进行编辑

示例代码：

    <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>

或者

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

### # Brotli 压缩

Foxit PDF SDK for Web 的核心是由 emscripten 编译的 wasm/asm 模块。其体积大小分别为 8M/13M，加载所需消耗的时间取决于浏览器的性能。wasm/asm 模块默认使用 brotli 压缩，但是 brotli 并非所有浏览器都原生支持，比如微软的 IE 浏览器，访问 https://caniuse.com/#search=brotli
(opens new window) 可以查看支持 brotli 的浏览器。IE 中 brotli 的解压需要使用浏览器的 JavaScript 引擎。此过程比较耗时，可能会抵消了 brotli 的优势，并导致性能损失。

建议您在测试环境中通过启用和禁用 brotli 来选择最合适的配置。

示例代码：

    <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 表示开启 brotli 压缩，false 表示禁用 brotli 压缩，默认值为 true。
                    }
                }
            }
            ...
        })
    </script>

或者

    <script src="path/to/PDFViewCtrl.full.js"></script>
    <script>
        var pdfviewer = new PDFViewCtrl.PDFViewer({
            ...
            jr: {
                    brotli: {
                        core: false // true 表示开启 brotli 压缩，false 表示禁用 brotli 压缩，默认值为 true。
                    }
                }
            ...
        })
    </script>

### # 预加载 webassembly 产物

从 7.1.1 版本开始，Foxit PDF SDK for Web 提供了一个脚本文件 "preload-jr-worker.js"，用来提前加载 webWorker 脚本以及 wasm/asm，以便更大程度的节省文档渲染的时间。

示例代码:

    <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

备注：从 8.5 版本开始，Web SDK 已不再使用 tileSize 渲染模式。以下内容仅适用于 8.5 之前的版本。

Foxit PDF SDK for Web 在渲染页面时，会进行光栅扫描。如果当前渲染页面太大，那么页面渲染速度将会非常慢。在打开大页面时，建议启用 tileSize 渲染模式。当前，支持的 tileSize 范围为 500-3000px。在我们的内部综合测试中，当 `tileSize` 设置为 1200px 时，渲染速度是最优的。但其可能因文档复杂度而不同。您可以根据实际场景的需求在测试环境中设置不同的 tileSize，如 200，3600 等，以获得最合适的配置方案。

适用场景:

- 具有大页面的复杂文档

示例代码：

    <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>

或者

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

### # Zoom

对于桌面端，Foxit PDF SDK for Web 默认以自适应宽度 (fitWidth) 的方式打开 PDF 文档。对于移动端，则默认以实际比例的方式打开 PDF 文档。如果以 fitWidth 的模式展示页面，显示或隐藏左侧工具栏时会导致 PDF 页面跟随视窗大小改变而被重新渲染，从而影响性能。为了规避这个问题，建议以实际比例的方式展示页面。

### # 渲染模式

从 8.5 版本开始，annotRenderingMode 已被废弃。 默认情况下，Foxit PDF SDK for Web 使用 native 模式（使用 WebAssembly 作为渲染引擎）来渲染注释和表单控件。当前，native 渲染模式已进行了显著优化，可以确保渲染质量和速度，因此不再需要 canvas 渲染模式。

### # 文档加载

#### # 同步加载

同步加载是先获取文件的完整二进制流用于加载。这是一种在内存和性能之间折中的加载方法。对于大小在 50M 至 500M 之间的文档，建议使用同步加载。

示例代码:

    <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>

#### # 异步加载

异步加载不需要完整的文件流，仅在加载时获取对应的部分。当文件过大 (超过500MB) ，无法全部放于内存时，或者当一次仅需要使用文档部分内容时，建议使用此方式来加载文档，以获得良好的性能体验。

示例代码:

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

#### # 从内存 arrayBuffer 加载文档

从 arrayBuffer 加载是将整个文件流存储于 wasm/asm 内存，并且从该内存加载。对于本地的小文档 (大小低于 500MB) ，或者可短时间内获取到整个文档流时，建议使用此方法来加载文档。该方法具有读取效率高和加载速度快的优势。启用该方法，则需要在构造函数 PDFUI 时，传入 getLoadingMode() 回调函数，当返回值为 1 则表示使用内存 arrayBuffer 加载文档。

示例代码:

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

如果用户实现了自己的 file open control，则使用如下方式加载：

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