css - 性能问题 : Recalculating Styles takes 200ms in PDF. js

标签 css google-chrome pdf.js

您好,我尝试在我的网站中实现 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 毫秒):

External (fast) file internal (slow) file

最佳答案

此性能下降是由 grab-to-pan.js 引起的,我为 PDF.js 编写的库,用于实现手形工具功能。按下鼠标时,库会切换 <html> 上的类名元素,通过 CSS 更改光标(从“抓取”到“抓取”):

.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 多倍。我已将补丁提交给 PDF.js PR #4209 .

关于css - 性能问题 : Recalculating Styles takes 200ms in PDF. js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21392844/

相关文章:

html - 如何在 Chrome 中禁用谷歌从 HTML 翻译

javascript - 在 WordSmith jquery 中,什么决定了双击后链接图标的位置?

javascript - 如何使 Iframe 中的事件与处理程序一起工作?

google-chrome - Firefox 中是否有等效于 Chrome 的 DevTools 'workspaces'?

javascript - 有没有办法使用pdf.js为pdf渲染编写javascript事件

javascript - 使用 pdf.js 在浏览器中渲染 JBIG2 图像

javascript - 如何从 pdf.js 中的用户选择中检索文本?

javascript - 如何在悬停时将背景颜色应用于多个元素?

CSS 选择器如何获取特定元素的索引

html - 在 Chrome 中调整大小时,游戏 Canvas 不适合整个页面