# Lag in pdfjsexporess webviewer when opening 5-6mb pdf with 700+pages

**URL:** <https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412>\
**Category:** Bug Reports\
**Created:** [March 3, 2023, 6:14am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412 "2023-03-03T06:14:15Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![vazearchis](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vazearchis](https://pdfjs.community/u/vazearchis)\
**Post date:** [March 3, 2023, 6:14am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/1 "2023-03-03T06:14:15Z")

</div>

Hi!  
There is a significant lag in ReactJs when opening the following pdf.  
Everything on the page gets frozen and non-responsive for a few seconds.

[https://www.fda.gov/food/fda-food-code/food-code-2017](https://www.fda.gov/food/fda-food-code/food-code-2017)  
[FDA Food Code 2017 09252019\_0.pdf](https://pdfjs.community/uploads/short-url/hgJDOEWkMAK7MY5mYEqvPxQMfTW.pdf) (5.7 MB)

---

<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:** [March 3, 2023, 5:14pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/2 "2023-03-03T17:14:51Z")

</div>

Hi there,

Thank you for reaching pdf.js express forums,

I was unable to reproduce this issue on our demo site:

> **[PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo)**
>
> Try the PDF.js Express Viewer demo: 26 out-of-the-box annotations, PDF form filling, e-signatures, UI customization, light/dark themes & more.

Are you using the latest version of pdf.js express?  
Could you please share a minimal runnable sample project along with the operating system + browser information?

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [March 10, 2023, 11:53am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/3 "2023-03-10T11:53:13Z")

</div>

Hi there,

I have the same problem with some PDF files. I experience it if the file contains links (but not every file works like that). In this case, the PDF is scanned (?) at the beginning and it may take some time. The more links, the more time it takes. It is not so difficult to reproduce. Just add `annotationChanged` listener, e.g.:

```javascript
    annotationManager.addEventListener(
      'annotationChanged',
      (annotations, action) => {
        console.log('Annotation changed', action, annotations[0])
      }
    );

```

and check your console. My output (for the file attached by @vazearchis) is as follow (it’s printed many many times):

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/e/e90e09263a2698e02950b7986359eff8c7774592.png)

Kevin Kim, indeed it cannot be reproduced on your demo page (even for my file), I don’t know why. I use your library in React application and I just remove from AnnotationManager annotations that don’t fit my logic, but this “scanning” is impossible to omit or I don’t know how to do it. Currently I use `@pdftron/pdfjs-express": "8.4.0"`. As I remember correctly, the same situation happened with the previously used `"@pdftron/webviewer": "8.2.0"`.

My testing file is here:  
[django.pdf](https://pdfjs.community/uploads/short-url/4UNHUPyzQcXqqjpDd30PpsiWkLu.pdf) (6.0 MB)

Maybe my case is the same, maybe not, but maybe my investigation will help.

Best regards,  
Dorota

---

<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:** [March 10, 2023, 5:28pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/4 "2023-03-10T17:28:20Z")

</div>

Hi there,

It is possible that the link annotations are being created when you load the PDF causing a delay in the annotationLoaded event.

Could you please try the same with disableAutomaticLinking:  
[https://pdfjs.express/api/Core.DocumentViewer.html#disableAutomaticLinking](https://pdfjs.express/api/Core.DocumentViewer.html#disableAutomaticLinking)

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![vazearchis](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vazearchis](https://pdfjs.community/u/vazearchis)\
**Post date:** [March 11, 2023, 3:34am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/5 "2023-03-11T03:34:25Z")

</div>

Thanks for you help! I will try disabling the auto linking and see if it improves the speed.

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [March 13, 2023, 9:06am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/6 "2023-03-13T09:06:59Z")

</div>

Thanks for the tip. Unfortunately it doesn’t work for me. I have disabled automatic linking. I checked that `isAutomaticLinkingEnabled()` returns `false`, but ‘scanning’ of links starts as before.  
@vazearchis, I am really curious about your result.

Best regards,  
Dorota

---

<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:** [March 13, 2023, 3:43pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/7 "2023-03-13T15:43:34Z")

</div>

Hi Dorota,

Could you try linearizing the pdf file to see if there’s any improvements?

> **[PDF.js Express Viewer Integration Best Practices | Documentation](https://pdfjs.express/documentation/learn-more/best-practices#linearize-pdf-files)**

If this does not work, could you please share a minimal runnable sample project for us to see the issue?

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [March 15, 2023, 3:08pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/8 "2023-03-15T15:08:49Z")

</div>

Hi Kevin,

I’ll try to give you a sample.

[Here](https://pdfjs.community/t/building-my-own-ui-doesnt-work-no-worker-file/1507) we had an issue ended with success and after that I applied locally every tip to the [sample](https://github.com/pdfjs-express/pdfjs-express-react-sample). My application is more developed, but the base is the same, so let’s use the sample.  
I needed to change several files to run the sample as follow:

`package.json` file:

```javascript
"@pdftron/pdfjs-express": "8.4.0",
"react": "17.0.2",
"react-dom": "17.0.2",

```

`index.html` file:

```javascript
<script src="%PUBLIC_URL%/pdfjsexpress/core/webviewer-core.min.js"></script>
<script src="%PUBLIC_URL%/pdfjsexpress/core/pdfjs/PDFJSDocumentType.js"></script>

```

instead of:  
`<script src="%PUBLIC_URL%/lib/webviewer.min.js"></script>`

`copy-webviewer-files.js` file (the whole file is as follow):

```javascript
const fs = require('fs-extra');
const path = require('path');

const copyFrom = path.resolve(__dirname, '../node_modules/@pdftron/pdfjs-express/public/core');
const copyTo = path.resolve(__dirname, '../public/pdfjsexpress/core');

fs.ensureDirSync(copyTo);
fs.copySync(copyFrom, copyTo)

```

and finally `App.js`, what I changed the most:

```javascript
import React, { useRef, useEffect } from 'react';
import './App.css';

const App = () => {
  const viewer = useRef(null);
  const scrollView = useRef(null);

  useEffect(() => {
    if (!viewer) { return }
    const Core = window.Core;
    Core.setWorkerPath('/pdfjsexpress/core');
    const documentViewer = new Core.DocumentViewer();
    // here I applied disableAutomaticLinking and it didn't stop "scanning"
    documentViewer.disableAutomaticLinking();
    window.documentViewer = documentViewer;
    window.WebViewer = {};
    window.WebViewer['l'] = () => 'Insert commercial license key here after purchase';

    documentViewer.setScrollViewElement(scrollView.current);
    documentViewer.setViewerElement(viewer.current);
    documentViewer.loadDocument('/files/PDFTRON_about.pdf').then(instance => {
      console.log('Document loaded');
    });

    // this section was added only for checking "scanning" PDF file for links
    const annotationManager = documentViewer.getAnnotationManager();
    annotationManager.addEventListener(
      'annotationChanged',
      (annotations, action) => {
        const annotation = annotations[0];
        console.log('Annotation changed', action, annotation);
      }
    );

  }, [viewer]);

  return (
    <div className="App">
      <div id="scroll-view" ref={scrollView}>
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer}></div>
      </div>
    </div>
  );
};

export default App;

```

You even don’t have tu use my `django.pdf` file - attatched to the repository `PDFTRON_about.pdf` file has some links too (less than mine, so it’s faster to test). At the beginning the preview looks bad, please resize the window and then pdf will be readable.

Hopefully, I didn’t miss any change in any of my files and you can easily reproduce the issue.

Best regards,  
Dorota

---

<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:** [March 15, 2023, 6:34pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/9 "2023-03-15T18:34:50Z")

</div>

Hi Dorota,

I was able to replicate the sample with your changes and see that the LinkAnnotationElement gets added to the django.pdf very slowly (one every 3 seconds). When scrolling down in the UI (while the previews are minimized), the pages are not rendered yet, and thus are creating the annotations as they load in.  
Another thing I notice is that there is no iFrame so the pages are not in a document container. Could this be the issue as the entire document is trying to be rendered all at once?

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [March 16, 2023, 12:23pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/10 "2023-03-16T12:23:08Z")

</div>

Hi Kevin,

Thank you for your answer. My another remarks are as follow:  
If you remove `div` with `scroll-view` id, “scanning” runs faster. I use `scrollView` in my application and I have `LinkAnnotationElement` getting added very fast. So, I don’t know if it depends on `scrollView` or not or maybe on any other styles.  
You are right, there is no document injected to an iFrame. I can see an iFrame as DOM element below, but it’s almost empty with display none. I have no idea, why I have many many divs (one div per one pdf page) instead of about twenty as I can see on PDF.js Viewer Demo page. Is it “a missing document container issue”, as you mentioned? Hm… maybe…, if there are only several pages, adding links is fast and almost imperceptible for the user. Why doesn’t `disableAutomaticLinking` help in this case anyway? Do you have any tips for me?

Best regards,  
Dorota

---

<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:** [March 16, 2023, 3:59pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/11 "2023-03-16T15:59:36Z")

</div>

Hi Dorota,

disableAutomaticLinking is to prevent WebViewer from creating additional annotations when there are text links on the page. For example if page 50 has ‘[google.com](http://google.com)’ text, when scrolling down to page 50 (or when page 50 is rendered) the link text becomes an annotation. This usually happens after document has been loaded onto WebViewer.

The div showing up with the id ‘virtualListContainer’ is for processing documents with a lot of pages, and they are rendered every 20 pages.  
[https://pdfjs.express/api/Core.DisplayModeManager.html#isVirtualDisplayEnabled](https://pdfjs.express/api/Core.DisplayModeManager.html#isVirtualDisplayEnabled)

I think the main issue comes from the fact that there is no iframe instantiated. In the original App.js, there was a WebViewer instance instantiated. However I believe you modified this to not have the iframe and using without the iframe, your ‘viewer’ tries to load everything all at once in initial load and this could be a huge performance issue for documents with a lot of pages and a lot of annotations.

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [April 27, 2023, 3:06pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/12 "2023-04-27T15:06:47Z")

</div>

Hi Kevin,

Thanks for your tips and I’m sorry for a long time of break in this topic. I got busy with other projects.  
I followed your advice and indeed, if I use instantiated WebViewer (with some tools/bars turned off), I can see “virtualListContainer”, as you mentioned. That’s cool, the number of pages in the DOM is now limited. Then, I tried to use the mentioned `disableAutomaticLinking` method and it didn’t work for my “scanning links”.  
But… now my code is quite similar to [this repository](https://github.com/pdfjs-express/pdfjs-express-react-sample), so I modified it a bit and the result is similar to that one in my application. You can achieve it by changing some parts of code:

1. Update dependencies:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/c/c0fe9e627d13b3698a36e2b080a30778eb713c68.png)

2. Change the application code a bit and of course use `django.pdf` file (the same happens for other files):  

This part shows that links are somehow scanning, although automatic linking is turned off:

```javascript
      annotManager.addEventListener(
        'annotationChanged',
        (annotations, action) => {
          console.log('action', action, annotations[0]);
        }
      );

```

Could you tell me what I’m doing wrong? The code above doesn’t include a licence key, but we do have one and when I use it, it’s exactly the same.

Best regards,  
Dorota

---

<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:** [April 27, 2023, 7:04pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/13 "2023-04-27T19:04:36Z")

</div>

Hi there,

Thank you for your response,

On the demo, [PDF.js Viewer Demo | PDF.js Express](https://pdfjs.express/demo) If I add the annotationsLoaded event, it took over 200 seconds for the annotations to load after document loading:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/d/d26c96930c665327b12926bd2882b87e449b60f6.jpeg)

Doing the same on the react sample, there’s a considerably longer time for the annotations to load:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/5/517c802df94278f4bfba3dd9a0703eb378fc2a81.jpeg)

I believe this is expected behaviour. If you call annotationManager.getAnnotationsList(), you will see a very large number of annotations and adding them into the document is what is causing the delay.

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [April 28, 2023, 1:40pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/14 "2023-04-28T13:40:21Z")

</div>

Hi Kevin,

Thank you for your answer. OK, I see…

I’ve found quite similar topic [here](https://pdfjs.community/t/annotationchanged-event-triggers-as-soon-as-pdf-is-opened-with-linkannotationevent/2387/16), but there is no solution for my case. If such a behaviour works fine and as expected, is there any possibility to turn off collecting links as annotations? I don’t need them - I have an application that allow user to select their own annotations on PDF and links like that are not allowed there (I only use HIGHLIGHT and RECTANGLE annotations). Collecting unnecesary links affects performance.

Sorry if it’s not the case from the topic of this thread anymore ☹ But maybe it is, who knows 🤷‍♀️

Best regards,  
Dorota

---

<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:** [April 28, 2023, 3:04pm UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/15 "2023-04-28T15:04:48Z")

</div>

Hi Dorota,

If you do not need to use the link annotations that come with the PDF, then possible solutions are:

1. Create the original PDF without any unnecessary annotations on them (this may not be feasible i.e. django.pdf)
2. Load the PDF in your application, then delete all the unnecessary annotations (this could take a while as you would need to wait for the annotationsLoaded event as outlined above)
3. Use a 3rd party software to flatten the annotation, but this would still require you to wait for the annotationsLoaded event (or their equivalent for another software) Example of this would be Apryse (formerly PDFTron) WebViewer: [Flatten Annotations in JavaScript PDF Viewer | PDF.js Express SDK](https://pdfjs.express/documentation/advanced/flatten-annotations)
4. Use a low level PDF editor [Apryse Documentation | Documentation](https://docs.apryse.com/documentation/cli/guides/pdf-cosedit/)

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![dorota.k](https://avatars.discourse-cdn.com/v4/letter/d/e79b87/32.png) [@dorota.k](https://pdfjs.community/u/dorota.k)\
**Post date:** [May 4, 2023, 8:03am UTC](https://pdfjs.community/t/lag-in-pdfjsexporess-webviewer-when-opening-5-6mb-pdf-with-700-pages/2412/16 "2023-05-04T08:03:49Z")

</div>

Hi Kim,

Thank you for your answer. We will consider which solution would be best for our team.

Best regards,  
Dorota