最佳实践
福昕 PDF SDK Web 版在浏览器沙盒环境中运行。为提升其运行速度，选择合适的网站操作方案及 SDK 的配置至关重要。本节将提供网站操作优化和 SDK 配置的实用参考。
网站资源优化
Gizp 和 Brotli 压缩
压缩可以缩小资源体积大小和减少下载时间。下列表格显示了在 UIExtension.css 和 UIExtension.full.js 上使用 gzip 和 brotli 压缩后的大小。
| 文件 | 原始大小 | 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 和 Mozilla 的 HTTP 缓存。
SDK 配置
只读模式
如果您当前的需求如以下场景，建议您以只读方式加载 SDK，从而提高渲染性能。
应用场景：
- 由 CAD 生成的复杂的 PDF 文档
- 页面渲染速度要求高
- 不需要对页面进行编辑
示例代码：
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>或者
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 压缩
SDK 的核心是由 emscripten 编译的 wasm/asm 模块。其体积大小分别为 8M/13M，加载所需消耗的时间取决于浏览器的性能。wasm/asm 模块默认使用 brotli 压缩，但是 brotli 并非所有浏览器都原生支持，比如微软的 IE 浏览器，访问 https://caniuse.com/#search=brotli 可以查看支持 brotli 的浏览器。IE 中 brotli 的解压需要使用浏览器的 JavaScript 引擎。此过程比较耗时，可能会抵消了 brotli 的优势，并导致性能损失。
建议您在测试环境中通过启用和禁用 brotli 来选择最合适的配置。
示例代码：
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 表示开启 brotli 压缩，false 表示禁用 brotli 压缩，默认值为 true。
}
}
}
// ...
})
</script>或者
html
<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 版本开始，SDK 提供了一个脚本文件 "preload-jr-worker.js"，用来提前加载 webWorker 脚本以及 wasm/asm，以便更大程度的节省文档渲染的时间。
示例代码:
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
提示：
从 8.5 版本开始，Web SDK 已不再使用 tileSize 渲染模式。以下内容仅适用于 8.5 之前的版本。
SDK 在渲染页面时，会进行光栅扫描。如果当前渲染页面太大，那么页面渲染速度将会非常慢。在打开大页面时，建议启用 tileSize 渲染模式。当前，支持的 tileSize 范围为 500-3000px。在我们的内部综合测试中，当 tileSize 设置为 1200px 时，渲染速度是最优的。但其可能因文档复杂度而不同。您可以根据实际场景的需求在测试环境中设置不同的 tileSize，如 200，3600 等，以获得最合适的配置方案。
适用场景:
- 具有大页面的复杂文档
示例代码：
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>或者
sh
<script src="path/to/PDFViewCtrl.full.js"></script>
<script>
var pdfviewer = new PDFViewCtrl.PDFViewer({
// ...
tileSize:1200,
// ...
})
</script>Zoom
对于桌面端，SDK 默认以自适应宽度 (fitWidth) 的方式打开 PDF 文档。对于移动端，则默认以实际比例的方式打开 PDF 文档。如果以 fitWidth 的模式展示页面，显示或隐藏左侧工具栏时会导致 PDF 页面跟随视窗大小改变而被重新渲染，从而影响性能。为了规避这个问题，建议以实际比例的方式展示页面。
渲染模式
从 8.5 版本开始，annotRenderingMode 已被废弃。 默认情况下，SDK 使用 native 模式（使用 WebAssembly 作为渲染引擎）来渲染注释和表单控件。当前，native 渲染模式已进行了显著优化，可以确保渲染质量和速度，因此不再需要 canvas 渲染模式。
文档加载
同步加载
同步加载是先获取文件的完整二进制流用于加载。这是一种在内存和性能之间折中的加载方法。对于大小在 50M 至 500M 之间的文档，建议使用同步加载。
示例代码:
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>异步加载
异步加载不需要完整的文件流，仅在加载时获取对应的部分。当文件过大 (超过500MB) ，无法全部放于内存时，或者当一次仅需要使用文档部分内容时，建议使用此方式来加载文档，以获得良好的性能体验。
示例代码:
html
<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 加载文档。
示例代码:
html
<script src="path/to/UIExtension.full.js"></script>
<script>
var pdfui = new UIExtension.PDFUI({
// ...
customs:
{
getLoadingMode: function (file) {
return 1
}
}
// ...
})
</script>如果用户实现了自己的 file open control，则使用如下方式加载：
javascript
var pdfui = new UIExtension.PDFUI({
//...
})
//... event bind context
{
var arrayBuffer = getArrayBuffer();
pdfui.openPDFByFile(arrayBuffer);
}
// ...