我扩展了pdf.js
查看器,以便可以将.svgs
插入.pdf
中。
这意味着,我只是在每个页面imageWrapper
中插入了一个额外的div
,并在其中添加了.svgs
作为objects
。结果看起来.svgs
位于.pdf
内,尽管它们当然只是查看器的一部分。
对于不熟悉的人:here,您可以找到查看器的演示;只需查看.pdf页,您就会理解我的解释。
但是,如果我只是向上/向下滚动,只要.svgs
靠近视口,观看者就会变得反应迟钝和迟钝。可能需要补充一点的是,这种行为不会插入视频或图像时显示。另外,.svgs
很大(大约3MB的3倍),但是如果我将它们放在一个普通的html
网站中,并带有一些盲文本,那么滚动根本不是问题。
在我看来,这似乎是某种布局调整问题。尽管如此,我还是无法真正找到原因:
Chrome的性能工具将我引向ui_utils.js
文件,尤其是以下代码段:
function watchScroll(viewAreaElement, callback) {
let debounceScroll = function(evt) {
if (rAF) {
return;
}
// schedule an invocation of scroll for next animation frame.
rAF = window.requestAnimationFrame(function viewAreaElementScrolled() {
rAF = null;
let currentX = viewAreaElement.scrollLeft;
let lastX = state.lastX;
if (currentX !== lastX) {
state.right = currentX > lastX;
}
state.lastX = currentX;
let currentY = viewAreaElement.scrollTop;
let lastY = state.lastY;
if (currentY !== lastY) {
state.down = currentY > lastY;
}
state.lastY = currentY;
callback(state);
});
};
let state = {
right: true,
down: true,
lastX: viewAreaElement.scrollLeft,
lastY: viewAreaElement.scrollTop,
_eventHandler: debounceScroll,
};
let rAF = null;
viewAreaElement.addEventListener('scroll', debounceScroll, true);
return state;
}
这对我来说很有意义,因为像scrollLeft
这样的命令会触发重排,但是用currentX
和currentY
注释掉零件并没有明显改变行为。
非常感谢您提供解决此问题的所有技巧,尤其是对pdf.js
的滚动行为的一些解释。
编辑:同时,我得出的结论是,这可能只是垃圾收集问题。也许隐藏.svgs
会有所帮助。