Performance issue: Recalculating Styles takes 200ms in PDF.js

StackOverflow https://stackoverflow.com/questions/21392844

  •  03-10-2022
  •  | 
  •  

Frage

Hi i try to implement subj plugin into my site.

I test this plugin on external file with the next line of code ( and plug-in is pretty fast: 

%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'}

But when i implement my own file ( which is in my own folder in the project ) This plugin become very slow.

%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'}

Screenshots

Left image: Timeline for External (fast) file (35ms for 1271 elements)
Right image: Timeline for Internal (slow) file (196ms for 7737 elements):

External (fast) file internal (slow) file

War es hilfreich?

Lösung

This performance hit is caused by grab-to-pan.js, a library I've written for PDF.js to implement the Hand Tool feature. When the mouse is pressed, the library toggles a class name on the <html> element, to change the cursor (from "grab" to "grabbing") via CSS:

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

This method appears to have a significant effect on performance, so I have changed the way of updating the cursor. See https://github.com/Rob--W/grab-to-pan.js/commit/e0f893753ac10a5c97159fd01155b05d234f4c0f for the changes. A few tests shows that the new method is over 100 times faster. I've submitted the patch to PDF.js as PR #4209.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top