perf(reader): create PDF page canvases on first render

Every PDF page shell created a default 300x150 canvas at mount. A 234-page
original PDF therefore held 234 blank backing stores (~16.7M pixels, ~67 MB)
before any page was visible, and the count scaled with the document.

Create the canvas in the renderer instead, matching the v3 path. Measured on a
production 234-page PDF: 234 canvases / 16.7M px at open -> 0 / 0, with the same
pages rendered as they scroll into view.

static/reader/pdf/reader-pdf-page-window.mjs

@@ -632,13 +632,14 @@ export function createReaderPdfPageWindow(readerContext) {
       shell.tabIndex = 0;
       shell.setAttribute("role", "region");
       shell.setAttribute("aria-label", `第 ${page} 页`);
-      const canvas = document.createElement("canvas");
-      canvas.setAttribute("aria-hidden", "true");
+      // The canvas is created by the renderer on first use: a 300x150 default
+      // canvas per shell costs ~180 KB, so a 250-page PDF held ~45 MB of blank
+      // backing stores before any page was visible.
       const textLayer = document.createElement("div");
       textLayer.className = "reader-pdf-text";
       textLayer.setAttribute("role", "document");
       textLayer.setAttribute("aria-label", `第 ${page} 页正文`);
-      shell.append(canvas, textLayer);
+      shell.append(textLayer);
       const pageState = document.createElement("div");
       pageState.className = "reader-page-state";
       readerContext.setPdfPageLoadingState(pageState, page);

static/reader/pdf/reader-pdf-renderer.mjs

@@ -546,6 +546,7 @@ export function createReaderPdfRenderer(readerContext) {
         if (renderController.signal.aborted) throw readerContext.readerAbortError();
         const pdf = readerContext.pdfDocument;
         if (!pdf) throw readerContext.readerAbortError();
+        let canvas = null;
         do {
           delete shell.dataset.pendingRerender;
           const generation = readerContext.readerRuntime.currentGeneration("pdf"),
@@ -557,7 +558,12 @@ export function createReaderPdfRenderer(readerContext) {
             scale = Math.min(3, shell.clientWidth / base.width),
             viewport = page.getViewport({ scale }),
             outputScale = Math.min(2, Math.max(1, Number(window.devicePixelRatio) || 1));
-          const canvas = shell.querySelector("canvas");
+          canvas = shell.querySelector("canvas");
+          if (!canvas) {
+            canvas = document.createElement("canvas");
+            canvas.setAttribute("aria-hidden", "true");
+            shell.prepend(canvas);
+          }
           canvas.width = Math.ceil(viewport.width * outputScale);
           canvas.height = Math.ceil(viewport.height * outputScale);
           canvas.style.width = "100%";
@@ -584,7 +590,7 @@ export function createReaderPdfRenderer(readerContext) {
           if (renderController.signal.aborted) throw readerContext.readerAbortError();
           if (!readerContext.isReaderGenerationCurrent("pdf", generation)) shell.dataset.pendingRerender = "1";
         } while (shell.dataset.pendingRerender);
-        shell.querySelector("canvas").classList.add("ready");
+        canvas.classList.add("ready");
         const pageState = shell.querySelector(".reader-page-state");
         if (pageState) pageState.hidden = true;
         shell.dataset.renderState = "rendered";