性能问题：在 PDF.js 中重新计算样式需要 200 毫秒

Question

您好，我尝试在我的网站中实现 subj 插件。

我用下一行代码在外部文件上测试这个插件（插件非常快：

%iframe{src: '/pdfjs/web/viewer.html?file=http://cdn.mozilla.net/pdfjs/tracemonkey.pdf', style:'border: 0', width:'100%', height:'100%', frameborder:'0', scrolling:'no'}

但是当我实现自己的文件时（在项目中我自己的文件夹中） 这个插件变得很慢。

%iframe{src: '/pdfjs/web/viewer.html?file=/system/uploads/deal/download_document/24/aaaaa/some.pdf', style:'border: 0', width:'100%', height:'100%', frameborder:'0', scrolling:'no'}

截图

左图：外部（快速）文件的时间轴（1271 个元素为 35 毫秒）
右图：内部（慢）文件的时间线（7737 个元素为 196 毫秒）：

Answer 1

这种性能下降是由grab-to-pan.js 引起的，这是我为 PDF.js 编写的一个库，用于实现手工具功能。按下鼠标时，库会在 <html> 元素上切换类名，以通过 CSS 更改光标（从“grab”到“grabbing”）：

.grab-to-pan-grabbing * {
    cursor: url("grabbing.cur"), move !important;
    cursor: -webkit-grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: grabbing !important;
}

这个方法看起来对性能有很大的影响，所以我改变了更新游标的方式。有关更改，请参阅https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f。一些测试表明，新方法的速度提高了 100 倍以上。我已经以PR #4209 的身份将补丁提交给PDF.js。