# Delayed rendering of PDF pages

**URL:** <https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [July 12, 2023, 1:15pm UTC](https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707 "2023-07-12T13:15:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nickmyersdt](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nickmyersdt/32/628_2.png) [@nickmyersdt](https://pdfjs.community/u/nickmyersdt)\
**Post date:** [July 12, 2023, 1:15pm UTC](https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707/1 "2023-07-12T13:15:33Z")

</div>

**Which product are you using?**  
PDF.js Express Viewer

**PDF.js Express Version**  
8.1.1 or [PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo?product=viewer)

**Detailed description of issue**  
We have a series of PDFs which - when viewed using `@pdftron/pdfjs-express-viewer` - when the “documentLoaded” event occurs, render first as blank pages, then slowly each page is rendered, possibly when the user scrolls the page into view. In our implementation, as pages scroll out of view, they appear to return to blank state and then appear to render when returned into view.

I reviewed this forum for similar questions, and didn’t find many.

I followed this guide: [How to Optimize PDFs for Accurate Rendering in PDF.js | PDF.js Express](https://pdfjs.express/blog/optimizing-documents-for-pdf-js) and tried (a) flattening and (b) PDF/A which (other than increasing the file sizes) made no difference to this behaviour.

The PDF I’m using is only 6 pages long (1.2MB).

I also threw together a minimal pdf.js implementation, and I think it displays the same issue: [nickm-pdf-viewer-test - CodeSandbox](https://codesandbox.io/s/nickm-pdf-viewer-test-vvry64)

**Expected behaviour**  
The PDF renders fully when loaded, and is kept in memory, rather than having pages unloaded as the user scrolls.

**Does your issue happen with every document, or just one?**  
A subset of documents

**Link to document**

> **[Are\_You\_Teaching\_Sound.pdf](https://assets.ctfassets.net/gtpqmzkhwpxd/6VQGuUKxiQ6DGcwPA5WUXT/afe6e077d2fe0732714e81465ee3560c/Are_You_Teaching_Sound.pdf)**

**Code snippet**  
Happens on the demo: [PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo?product=viewer)  
Our code: [PDF Viewer ($2568672) · Snippets · GitLab](https://gitlab.com/-/snippets/2568672)

**Help required**  
I’d like to understand what it is about these PDFs that is causing this behaviour (I’m fairly certain it’s the PDF) although if there are things I can change about our pdf.js express implementation that will improve matters, I’d love to hear about them please.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [July 12, 2023, 5:27pm UTC](https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707/3 "2023-07-12T17:27:27Z")

</div>

Hi there,

Thank you for contacting pdf.js express forums,

I notice that when viewing your particular PDF on scroll, there are some warnings in the console right after the pages are rendered:  
Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: [HTML Standard](https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently)

I also notice that when scrolling and zooming in/out, the CPU usage goes much higher compared to another PDF.

Please note that this could be related to the [PDFJS library](https://github.com/mozilla/pdf.js/).

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![nickmyersdt](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nickmyersdt/32/628_2.png) [@nickmyersdt](https://pdfjs.community/u/nickmyersdt)\
**Post date:** [July 12, 2023, 6:02pm UTC](https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707/4 "2023-07-12T18:02:10Z")

</div>

Thank you @kkim

I don’t know what to do about the Canvas2D warnings, thanks for spotting that, I’ll take a look around on the interwebs and PDFJS library repo.

---

<div class="post-metadata">

**Author:** ![nickmyersdt](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/nickmyersdt/32/628_2.png) [@nickmyersdt](https://pdfjs.community/u/nickmyersdt)\
**Post date:** [July 12, 2023, 6:49pm UTC](https://pdfjs.community/t/delayed-rendering-of-pdf-pages/2707/5 "2023-07-12T18:49:39Z")

</div>

After tinkering around, I removed both PDF.js and PDFJS Express Viewer, and replaced with an iFrame.

Chrome loads the PDF instantly, and fully, with no issues.  
Firefox exhibits the same issues as the PDF viewers, blank pages, and then as the user scrolls, displays a blank page with a spinner and then the page appears after a second or two.

Assuming that Firefox uses PDF.js to render PDF files in an iFrame, I’ll continue down this line of investigation.
