Implement offscreen rendering with workers

Move the work of drawing the PDF onto the cavas to a worker thread
using OffscreenCanvas. This should free up the main thread a bit by
moving all of the CanvasGraphics operations to this "renderer" worker.

Author: ryzokuken

src/core/document.js

@@ -127,10 +127,11 @@ class Page {
     };
   }
 
-  #createPartialEvaluator(handler) {
+  #createPartialEvaluator(handler, rendererHandler) {
     return new PartialEvaluator({
       xref: this.xref,
       handler,
+      rendererHandler,
       pageIndex: this.pageIndex,
       idFactory: this._localIdFactory,
       fontCache: this.fontCache,
@@ -430,6 +431,7 @@ class Page {
 
   async getOperatorList({
     handler,
+    rendererHandler,
     sink,
     task,
     intent,
@@ -440,7 +442,10 @@ class Page {
     const contentStreamPromise = this.getContentStream();
     const resourcesPromise = this.loadResources(RESOURCES_KEYS_OPERATOR_LIST);
 
-    const partialEvaluator = this.#createPartialEvaluator(handler);
+    const partialEvaluator = this.#createPartialEvaluator(
+      handler,
+      rendererHandler
+    );
 
     const newAnnotsByPage = !this.xfaFactory
       ? getNewAnnotationsMap(annotationStorage)
@@ -1263,7 +1268,7 @@ class PDFDocument {
     this.xfaFactory.setImages(xfaImages);
   }
 
-  async #loadXfaFonts(handler, task) {
+  async #loadXfaFonts(handler, task, rendererHandler) {
     const acroForm = await this.pdfManager.ensureCatalog("acroForm");
     if (!acroForm) {
       return;
@@ -1289,6 +1294,7 @@ class PDFDocument {
     const partialEvaluator = new PartialEvaluator({
       xref: this.xref,
       handler,
+      rendererHandler,
       pageIndex: -1,
       idFactory: this._globalIdFactory,
       fontCache,
@@ -1401,9 +1407,9 @@ class PDFDocument {
     this.xfaFactory.appendFonts(pdfFonts, reallyMissingFonts);
   }
 
-  loadXfaResources(handler, task) {
+  loadXfaResources(handler, task, rendererHandler) {
     return Promise.all([
-      this.#loadXfaFonts(handler, task).catch(() => {
+      this.#loadXfaFonts(handler, task, rendererHandler).catch(() => {
         // Ignore errors, to allow the document to load.
       }),
       this.#loadXfaImages(),

src/core/evaluator.js

@@ -221,6 +221,7 @@ class PartialEvaluator {
   constructor({
     xref,
     handler,
+    rendererHandler,
     pageIndex,
     idFactory,
     fontCache,
@@ -233,6 +234,7 @@ class PartialEvaluator {
   }) {
     this.xref = xref;
     this.handler = handler;
+    this.rendererHandler = rendererHandler;
     this.pageIndex = pageIndex;
     this.idFactory = idFactory;
     this.fontCache = fontCache;
@@ -552,13 +554,13 @@ class PartialEvaluator {
     const transfers = imgData ? [imgData.bitmap || imgData.data.buffer] : null;
 
     if (this.parsingType3Font || cacheGlobally) {
-      return this.handler.send(
+      return this.rendererHandler.send(
         "commonobj",
         [objId, "Image", imgData],
         transfers
       );
     }
-    return this.handler.send(
+    return this.rendererHandler.send(
       "obj",
       [objId, this.pageIndex, "Image", imgData],
       transfers
@@ -786,11 +788,10 @@ class PartialEvaluator {
       // globally, check if the image is still cached locally on the main-thread
       // to avoid having to re-parse the image (since that can be slow).
       if (w * h > 250000 || hasMask) {
-        const localLength = await this.handler.sendWithPromise("commonobj", [
-          objId,
-          "CopyLocalImage",
-          { imageRef },
-        ]);
+        const localLength = await this.rendererHandler.sendWithPromise(
+          "commonobj",
+          [objId, "CopyLocalImage", { imageRef }]
+        );
 
         if (localLength) {
           this.globalImageCache.setData(imageRef, globalCacheData);
@@ -1019,7 +1020,7 @@ class PartialEvaluator {
     }
 
     state.font = translated.font;
-    translated.send(this.handler);
+    translated.send(this.rendererHandler);
     return translated.loadedName;
   }
 
@@ -1039,7 +1040,7 @@ class PartialEvaluator {
         PartialEvaluator.buildFontPaths(
           font,
           glyphs,
-          this.handler,
+          this.rendererHandler,
           this.options
         );
       }
@@ -1516,9 +1517,14 @@ class PartialEvaluator {
     localShadingPatternCache.set(shading, id);
 
     if (this.parsingType3Font) {
-      this.handler.send("commonobj", [id, "Pattern", patternIR]);
+      this.rendererHandler.send("commonobj", [id, "Pattern", patternIR]);
     } else {
-      this.handler.send("obj", [id, this.pageIndex, "Pattern", patternIR]);
+      this.rendererHandler.send("obj", [
+        id,
+        this.pageIndex,
+        "Pattern",
+        patternIR,
+      ]);
     }
     return id;
   }

src/core/worker.js

@@ -82,6 +82,8 @@ class WorkerMessageHandler {
 
   static setup(handler, port) {
     let testMessageProcessed = false;
+    let rendererHandler = null;
+
     handler.on("test", data => {
       if (testMessageProcessed) {
         return; // we already processed 'test' message once
@@ -94,12 +96,19 @@ class WorkerMessageHandler {
 
     handler.on("configure", data => {
       setVerbosityLevel(data.verbosity);
+      rendererHandler = new MessageHandler(
+        "worker-channel",
+        "renderer-channel",
+        data.channelPort
+      );
     });
 
-    handler.on("GetDocRequest", data => this.createDocumentHandler(data, port));
+    handler.on("GetDocRequest", data =>
+      this.createDocumentHandler(data, port, rendererHandler)
+    );
   }
 
-  static createDocumentHandler(docParams, port) {
+  static createDocumentHandler(docParams, port, rendererHandler) {
     // This context is actually holds references on pdfManager and handler,
     // until the latter is destroyed.
     let pdfManager;
@@ -173,7 +182,11 @@ class WorkerMessageHandler {
         const task = new WorkerTask("loadXfaResources");
         startWorkerTask(task);
 
-        await pdfManager.ensureDoc("loadXfaResources", [handler, task]);
+        await pdfManager.ensureDoc("loadXfaResources", [
+          handler,
+          task,
+          rendererHandler,
+        ]);
         finishWorkerTask(task);
       }
 
@@ -725,6 +738,7 @@ class WorkerMessageHandler {
         page
           .getOperatorList({
             handler,
+            rendererHandler,
             sink,
             task,
             intent: data.intent,
@@ -808,8 +822,8 @@ class WorkerMessageHandler {
         .then(page => pdfManager.ensure(page, "getStructTree"));
     });
 
-    handler.on("FontFallback", function (data) {
-      return pdfManager.fontFallback(data.id, handler);
+    rendererHandler.on("FontFallback", function (data) {
+      return pdfManager.fontFallback(data.id, rendererHandler);
     });
 
     handler.on("Cleanup", function (data) {