背景
在项目中使用pdfjs渲染页面，出现缩放和dpr异常，表现为文档内容等比缩放到页面左上部分，且上下颠倒。
问题排查
问题出现之前，使用的渲染方式是getDocument完成后，逐页面循环调用page.render，直到所有页面都加载完成。为了节省资源，引入 Intersection Observer以后，发现此问题出现。
查找资料得知，出现此问题的原因99%都是因为并行操作canvas导致的。
现在逻辑是每次收到Observer回调，就调一次渲染单页（先设置canvas宽高，再调用page.render）。Intersection Observer有时会反复针对某一页面进行回调，虽然我们已经使用了一个set进行标记加锁防止重复渲染，但是只保护了page.render的调用，漏掉了设置canvas尺寸的逻辑，这就导致了在page.render过程中依然可以设置了canvas宽高的情况，也就出现了开头这种异常情况。将canvas尺寸修改也加到保护范围后，问题解决。
解决方法
想办法确保不要同时操纵canvas，包括page.render和修改canvas height/width等。此处使用的方案是一个set，渲染中将pageNum放到set中，每次请求渲染前检查page是否在set中。注意，这只是个简单的实现，极端情况下依然可能存在竞争的情况。
伪代码如下：
const busyPageSet = new Set();
const renderPage = async (pageNum) => {
// 关键代码，判断当前页面是否被标记为正在渲染状态
if (busyPageSet.has(pageNum)) {
return;
}
busyPageSet.add(pageNum); // 标记当前页面为渲染状态
const page = await pdfDoc.getPage(pageNum);
const viewport = page.getViewport(); // 并处理scale和dpr等缩放逻辑
const canvas = getCanvasRef(pageNum); // 获取canvas
canvas.width = ...; // 设置canvas高度
await page.render({context: ..., viewport: ...}).promise; // 调用pdfjs渲染canvas
busyPageSet.delete(pageNum); // 解除标记当前页面的渲染状态
}
补充
当重复调用page.render时，pdfjs会在控制台输出告警。但是若渲染时进行了canvas的尺寸修改、直接调用draw命令，pdfjs不会发出告警。
本次问题主要原因是加锁保护时，设置的保护范围不全面，漏掉了其他canvas操作，而这又不会触发告警，导致排查的时间有点长，值得吸取经验。
参考资料
https://stackoverflow.com/questions/44885973/pdf-js-document-is-presented-upside-down-randomly
https://github.com/mozilla/pdf.js/issues/11277#issuecomment-546498526
网友评论