buninu-browser 0.2.0 → 0.2.1

package/lib/renderer/page-renderer.js

@@ -25,14 +25,16 @@
 import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
 import { DESKTOP_USER_AGENT } from "../user-agent.js";
 import { parseHTMLDocument } from "../happy-dom/parser.js";
-import { layoutText } from "../layout/text-layout.js";
+import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
-import { RenderTreeBuilder, renderTreeText } from "../render-tree/index.js";
-import { StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.js";
+import { matchSelectors, StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
+import { elementFeatures, sheetTraits } from "../style/selector-traits.js";
 import { buildDisplayList, visibleItems } from "../paint/display-list.js";
 import { backgroundBytes, cropViewport, encodeImage } from "../paint/frame.js";
-import { createPageRealm } from "./page-realm.js";
+import { CLASSIC_SCRIPT_TYPES, createPageRealm } from "./page-realm.js";
 import { MOBILE_USER_AGENT } from "./flags.js";
 import { formatHint } from "../../vendor/wasmpeg/src/js/formats.js";
 import { floatToS16, splitSamples } from "../audio/pcm.js";
@@ -47,6 +49,7 @@ const hostClearInterval = globalThis.clearInterval;
 
 /** How long subresources may take before a preview of the unstyled document is shown. */
 export const PREVIEW_DELAY_MS = 300;
+const MAX_COMPILED_COMPOUNDS = 10_000;
 
 // Media controls: the bar's height over video, and where its parts sit.
 const MEDIA_BAR_HEIGHT = 24;
@@ -166,15 +169,19 @@ export async function createPageRenderer({
   const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
   const emojiPresentation = /^\p{Emoji_Presentation}/u;
   const renderTreeBuilder = new RenderTreeBuilder();
+  const layoutEngine = new LayoutEngine({ measureText, fontMetrics });
   const styleEngine = new StyleEngine();
   // Incremental restyle: what may have changed style since the last
   // computation. DOM mutations come from a MutationObserver; state that is
   // not in the DOM tree (checked, value, focus) is marked by the code that
   // changes it. `full` asks for a complete restyle.
-  const styleChanges = { full: true, roots: new Set(), records: [], observer: null, activeElement: null };
+  const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null, activeElement: null };
   let selectorTraits = { sibling: false, has: null, sheets: null };
   let lastStyleParts = "";
+  let laidOutSheets = null;
   const sheetTraitsCache = new Map();
+  // Invalidation compounds compiled for matchesCompound() and matchSelectors().
+  const compiledCompounds = new Map();
   let lastStyleReason = "";
   let hasState = null;
   let hasStateStale = false;
@@ -199,6 +206,8 @@ export async function createPageRenderer({
     hintsVisible: false,
     styleSheets: [],
     linkSheets: null,
+    // The document's scripts fetched ahead of their turn (see preloadScripts), by URL.
+    preloadedScripts: new Map(),
     backgroundColor: "rgba(255, 255, 255, 1)",
     resources: new WeakMap(),
     decodedImages: [],
@@ -209,6 +218,7 @@ export async function createPageRenderer({
     // "off" until the renderer process has set up its sandbox.
     scripting: "off",
     dirty: false,
+    resourceLayoutDirty: false,
     userAgent: mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT,
     // document.cookie as last reported by the controller (non-HttpOnly only).
     cookie: "",
@@ -845,19 +855,24 @@ export async function createPageRenderer({
 
   /** `linkSheets` (link element -> { url, text }) makes the sheet list follow the DOM; without it the given sheets are fixed. */
   /** Marks a node whose own state changed (its subtree may restyle); null asks for a full restyle. */
-  function markStyleDirty(node) {
+  function markStyleDirty(node, features = [":state"]) {
     // Documents and fragments carry no state selectors read; their children's
     // changes arrive as mutation records.
     if (node?.nodeType === 9 || node?.nodeType === 11) return;
     const element = node?.nodeType === 1 ? node : node?.parentElement;
     if (!element) styleChanges.full ||= node ? `touched ${node.nodeName}` : "unknown change";
-    else styleChanges.roots.add(element);
+    else {
+      styleChanges.roots.add(element);
+      const previous = styleChanges.rootFeatures.get(element);
+      styleChanges.rootFeatures.set(element, previous ? [...new Set([...previous, ...features])] : features);
+    }
   }
 
   function observeStyleChanges(document) {
     styleChanges.observer?.disconnect();
     styleChanges.records = [];
     styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
     styleChanges.full = "new document";
     styleChanges.activeElement = null;
     const observer = new page.window.MutationObserver((records) => { styleChanges.records.push(...records); });
@@ -882,6 +897,7 @@ export async function createPageRenderer({
       sheets, sibling: any("sibling"), hasSiblings: any("hasSiblings"),
       hasCompounds: [...union("hasCompounds")], structuralCompounds: [...union("structuralCompounds")],
       descendantFeatures: union("descendantFeatures"), siblingFeatures: union("siblingFeatures"),
+      descendantStateCompounds: parts.flatMap((part) => part.descendantStateCompounds),
       siblingTargetCompounds: [...union("siblingTargetCompounds")],
       forward: any("forward"), firstChild: any("firstChild"), backward: any("backward"), lastChild: any("lastChild"),
       defined: any("defined"), target: any("target"),
@@ -898,70 +914,7 @@ export async function createPageRenderer({
   function sheetTraitsFor(sheet) {
     let traits = sheetTraitsCache.get(sheet);
     if (traits) return traits;
-    const text = String(sheet).replace(/\/\*[\s\S]*?\*\//g, "");
-    const plain = text.replace(/\[[^\]]*\]/g, "[]").replace(/\{[^}]*\}/g, "{}");
-    const sibling = /[^\s~|^$*=\[]\s*[+~]\s*[^\s=]/.test(plain);
-    const hasCompounds = new Set();
-    let hasSiblings = false;
-    const selectorsOnly = text.replace(/\{[^}]*\}/g, "{}");
-    for (const block of selectorsOnly.matchAll(/[^{}]*:has\([^{]*\{/g)) {
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        for (const compound of compoundsOf(selector)) {
-          if (!compound.includes(":has(")) continue;
-          hasCompounds.add(compound.replace(/::[\w-]+(\([^)]*\))?$/, ""));
-          if (/:has\(\s*[+~]/.test(compound)) hasSiblings = true;
-        }
-      }
-    }
-    // Structural pseudo-classes: which siblings a child list change can
-    // affect, and the compounds where they are not the subject (".a:last-child .b"),
-    // whose matches decide whether a sibling's subtree must restyle too.
-    const structural = /:(?:nth-child|nth-last-child|first-child|last-child|only-child|nth-of-type|nth-last-of-type|first-of-type|last-of-type|only-of-type)\b/;
-    const structuralCompounds = new Set();
-    for (const block of selectorsOnly.matchAll(/[^{}]*\{/g)) {
-      if (!structural.test(block[0])) continue;
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        const compounds = compoundsOf(selector);
-        for (const compound of compounds.slice(0, -1)) if (structural.test(compound)) structuralCompounds.add(compound);
-      }
-    }
-    // Invalidation features (class ".x", id "#x", attribute "[x", tag "t:x",
-    // state ":state", anything "*") of compounds that are not a selector's
-    // subject: left of a descendant/child combinator, a change to them can
-    // restyle the element's subtree; left of + / ~, its later siblings.
-    const descendantFeatures = new Set();
-    const siblingFeatures = new Set();
-    // Selectors ending in a compound right of + / ~ that is not the subject
-    // (".a + .b" of ".a + .b .c"): a later sibling's subtree restyles only
-    // when its match of one of them changes.
-    const siblingTargetCompounds = new Set();
-    for (const block of selectorsOnly.matchAll(/[^{}@]*\{/g)) {
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        const parts = complexParts(selector);
-        parts.forEach(({ compound, combinator }, index) => {
-          const nested = /\([^)]*[\s>+~][^)]*\)/.test(compound); // :is(.a .b) hides combinators
-          const previous = parts[index - 1]?.combinator;
-          if ((previous === "+" || previous === "~") && index < parts.length - 1) {
-            // With what is left of it ("li:first-child + li"): the relation to
-            // the earlier sibling can end while the compound still matches.
-            const left = parts.slice(0, index).map((part) => `${part.compound} ${part.combinator === " " ? "" : part.combinator + " "}`).join("");
-            siblingTargetCompounds.add(left + compound);
-          }
-          if (index === parts.length - 1 && !nested) return;
-          const features = compoundFeatures(compound);
-          if (nested || combinator === " " || combinator === ">") for (const feature of features) descendantFeatures.add(feature);
-          if (nested || combinator === "+" || combinator === "~") for (const feature of features) siblingFeatures.add(feature);
-        });
-      }
-    }
-    traits = {
-      sibling, hasCompounds, hasSiblings, structuralCompounds, descendantFeatures, siblingFeatures, siblingTargetCompounds,
-      forward: /:(?:nth-child|nth-of-type|first-of-type|only-of-type)\b/.test(selectorsOnly),
-      firstChild: /:(?:first-child|only-child)\b/.test(selectorsOnly),
-      backward: /:(?:nth-last-child|nth-last-of-type|last-of-type|only-of-type)\b/.test(selectorsOnly),
-      lastChild: /:(?:last-child|only-child)\b/.test(selectorsOnly),
-      defined: text.includes(":defined"), target: /:target\b/.test(text),
-    };
+    traits = sheetTraits(sheet);
     sheetTraitsCache.set(sheet, traits);
     return traits;
   }
@@ -973,11 +926,14 @@ export async function createPageRenderer({
    */
   function recordHasState(traits) {
     const reuse = hasState !== null;
+    if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
     const record = (compounds, previous) => {
+      const missing = compounds.filter((compound) => !(reuse && previous?.has(compound)));
+      const matched = missing.length ? matchSelectors(page.document, missing, compiledCompounds) : null;
       const state = new Map();
       for (const compound of compounds) {
-        if (reuse && previous?.has(compound)) { state.set(compound, previous.get(compound)); continue; }
-        try { state.set(compound, new Set(page.document.querySelectorAll(compound))); } catch { /* invalid: never matches */ }
+        if (reuse && previous?.has(compound)) state.set(compound, previous.get(compound));
+        else if (matched.has(compound)) state.set(compound, matched.get(compound)); // invalid ones never match
       }
       return state;
     };
@@ -988,13 +944,12 @@ export async function createPageRenderer({
 
   /** Brings the recorded matches of an inserted subtree up to date (it may have been in the document before). */
   function recordInserted(root) {
-    for (const state of [hasState, structuralState, siblingState]) {
-      for (const [compound, matched] of state ?? []) {
-        let inside;
-        try {
-          inside = new Set(root.querySelectorAll(compound));
-          if (root.matches(compound)) inside.add(root);
-        } catch { continue; }
+    const states = [hasState, structuralState, siblingState].filter(Boolean);
+    const now = matchSelectors(root, states.flatMap((state) => [...state.keys()]), compiledCompounds);
+    for (const state of states) {
+      for (const [compound, matched] of state) {
+        const inside = now.get(compound);
+        if (!inside) continue;
         for (const element of [root, ...root.getElementsByTagName("*")]) {
           if (inside.has(element)) matched.add(element); else matched.delete(element);
         }
@@ -1003,12 +958,24 @@ export async function createPageRenderer({
   }
 
 
+  /** element.matches(compound), with the compound compiled once (see matchSelectors). */
+  function matchesCompound(element, compound) {
+    let compiled = compiledCompounds.get(compound);
+    if (compiled === undefined) {
+      compiled = compileSelector(element, compound);
+      if (compiled === undefined) return element.matches(compound);
+      if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
+      compiledCompounds.set(compound, compiled);
+    }
+    return compiled !== null && matchesCompiled(element, compiled);
+  }
+
   /** Re-checks `element` against recorded compounds; whether any match changed (the state is updated). */
   function matchesChanged(state, element) {
     let changed = false;
     for (const [compound, matched] of state ?? []) {
       let now = false;
-      try { now = element.matches(compound); } catch {}
+      try { now = matchesCompound(element, compound); } catch {}
       if (now === matched.has(element)) continue;
       if (now) matched.add(element); else matched.delete(element);
       changed = true;
@@ -1034,7 +1001,7 @@ export async function createPageRenderer({
         checked.add(candidate);
         for (const [compound, matched] of hasState) {
           let now = false;
-          try { now = candidate.matches(compound); } catch {}
+          try { now = matchesCompound(candidate, compound); } catch {}
           if (now === matched.has(candidate)) continue;
           if (now) matched.add(candidate); else matched.delete(candidate);
           add(candidate);
@@ -1055,6 +1022,10 @@ export async function createPageRenderer({
     const records = styleChanges.records;
     if (styleChanges.observer) records.push(...styleChanges.observer.takeRecords());
     const roots = styleChanges.roots;
+    // Explicit roots mean that state-dependent selectors may need restyling;
+    // they do not by themselves change render-tree content. DOM mutation
+    // records below identify structural/content changes separately.
+    let treeDirty = false;
     let full = styleChanges.full;
     const active = page.document.activeElement;
     if (active !== styleChanges.activeElement) {
@@ -1081,11 +1052,22 @@ export async function createPageRenderer({
       if (matchesChanged(siblingState, element)) roots.add(element);
     };
     const later = (element) => { for (let next = element?.nextElementSibling; next; next = next.nextElementSibling) laterSibling(next); };
+    const featureMatches = (used, changedFeatures) => changedFeatures.some((feature) => feature === ":state"
+      ? [...used].some((candidate) => candidate.startsWith(":"))
+      : used.has(feature));
+    const stateAffectsDescendants = (element, changedFeatures) => {
+      const states = changedFeatures.filter((feature) => feature.startsWith(":"));
+      if (!states.length) return false;
+      const available = new Set(elementFeatures(element));
+      return traits.descendantStateCompounds.some((entry) => (states.includes(":state") || entry.states.some((state) => states.includes(state)))
+        && entry.required.every((feature) => available.has(feature)));
+    };
     /** An element whose features changed: itself, and wider where non-subject compounds use them. */
     const changed = (element, features) => {
       self.add(element);
-      if (features.some((feature) => traits.descendantFeatures.has(feature))) roots.add(element);
-      if (traits.siblingFeatures.has("*") || features.some((feature) => traits.siblingFeatures.has(feature))) later(element);
+      const ordinary = features.filter((feature) => !feature.startsWith(":"));
+      if (featureMatches(traits.descendantFeatures, ordinary) || stateAffectsDescendants(element, features)) roots.add(element);
+      if (traits.siblingFeatures.has("*") || featureMatches(traits.siblingFeatures, features)) later(element);
       hasChanges(traits, element, add, hasChecked);
     };
     const touchSibling = (element) => {
@@ -1099,7 +1081,7 @@ export async function createPageRenderer({
     // the records also describe; both start as a change of the element's state.
     for (const element of [...roots]) {
       roots.delete(element);
-      if (!full) changed(element, [":state"]);
+      if (!full) changed(element, styleChanges.rootFeatures.get(element) ?? [":state"]);
     }
     for (const record of records) {
       if (full) break;
@@ -1107,6 +1089,10 @@ export async function createPageRenderer({
       if (record.type === "attributes") {
         if (target.nodeType !== 1) continue;
         const name = record.attributeName;
+        // data/ARIA/title changes have no direct render-tree representation;
+        // selectors that observe them are handled by the style diff below.
+        // Other attributes may alter controls, replaced elements or visibility.
+        if (!name.startsWith("data-") && !name.startsWith("aria-") && name !== "title") treeDirty = true;
         const features = ["[" + name];
         if (name === "class") {
           const before = new Set(String(record.oldValue ?? "").split(/\s+/).filter(Boolean));
@@ -1120,6 +1106,7 @@ export async function createPageRenderer({
         }
         changed(target, features);
       } else if (record.type === "childList") {
+        treeDirty = true;
         if (target.nodeType !== 1) { full = `children of ${target.nodeName}`; break; }
         // Inserted elements restyle; the parent itself may change (:empty);
         // siblings around the change point may match structural
@@ -1150,6 +1137,7 @@ export async function createPageRenderer({
           }
         }
       } else if (record.type === "characterData") {
+        treeDirty = true;
         // Only :empty and :has() can see text: the parent itself.
         const parent = target.parentElement;
         if (parent) {
@@ -1161,10 +1149,11 @@ export async function createPageRenderer({
     if (!full) for (const node of topmostConnected(inserted, page.document)) recordInserted(node);
     styleChanges.records = [];
     styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
     styleChanges.full = false;
     lastStyleReason = full || `${roots.size} root(s), ${self.size} self`;
     if (full) hasState = null; // recorded again after the full restyle
-    return full ? null : { roots, self };
+    return full ? null : { roots, self, treeDirty };
   }
 
   function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
@@ -1197,10 +1186,19 @@ export async function createPageRenderer({
   /** Style, render tree, layout and display list of the current document. */
   function styleAndLayout() {
     const started = hostPerformance.now();
+    const ms = (from, to) => Math.round(to - from);
     const sheets = currentStyleSheets();
     const environment = { width: page.width, height: page.height, mobile };
     const changes = takeStyleChanges(sheets); // drained even when unused, so records do not pile up
     const taken = hostPerformance.now();
+    // A rendering opportunity can be scheduled by lifecycle work which did
+    // not actually change DOM, state, resources, or styles. Keep the retained
+    // layout/display list in that case instead of laying the whole page out.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && changes.roots.size === 0 && changes.self.size === 0) {
+      lastStyleParts = `changes ${Math.round(taken - started)}, no invalidation`;
+      return { style: Math.round(taken - started), layout: 0, skipped: true };
+    }
     styleEngine.compute(page.document, sheets, environment, fullStyle ? null : changes?.roots ?? null, changes?.self ?? null);
     const computed = hostPerformance.now();
     if (!hasState || hasStateStale) {
@@ -1208,17 +1206,40 @@ export async function createPageRenderer({
       hasStateStale = false;
     }
     const recorded = hostPerformance.now();
+    // Attribute mutations used by application bookkeeping often match no
+    // different rule and do not alter render-tree content. Once style has
+    // proved that no element changed, retain layout and paint unchanged.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && !changes.treeDirty && styleEngine.incremental && styleEngine.restyled === 0) {
+      lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, no visual change`;
+      return { style: Math.round(recorded - started), layout: 0, skipped: true };
+    }
     if (verifyStyle && styleEngine.incremental) verifyIncrementalStyle(sheets, environment);
     const verified = hostPerformance.now();
     page.backgroundColor = documentBackground(page.document, styleEngine);
-    page.renderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
+    const nextRenderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
     const styled = hostPerformance.now();
-    const ms = (from, to) => Math.round(to - from);
     lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, tree ${ms(verified, styled)}`;
-    page.layout = layoutText(page.renderTree, {
+    // MutationObserver also reports changes under non-rendered nodes such as
+    // script and metadata elements. Compare the actual immutable layout input
+    // after rebuilding it, so those changes do not trigger a full reflow.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets
+      && sameLayoutInput(page.renderTree.root, nextRenderTree.root, {
+        ignoreResources: true,
+        // A zero-element incremental pass retained every computed style.
+        // Control placeholders may still wrap that style in a fresh object.
+        ignoreStyles: styleEngine.incremental && styleEngine.restyled === 0,
+      })) {
+      lastStyleParts += ", unchanged layout input";
+      return { style: Math.round(styled - started), layout: 0, skipped: true };
+    }
+    page.renderTree = nextRenderTree;
+    page.layout = layoutEngine.layout(page.renderTree, {
       measureText, fontMetrics, width: page.width, viewportHeight: page.height, x: 0, y: 0,
     });
-    page.displayList = buildDisplayList(page.layout, page.renderTree);
+    page.displayList = buildDisplayList(page.layout, page.renderTree, page.resources);
+    page.resourceLayoutDirty = false;
+    laidOutSheets = sheets;
     viewport.setContentSize(page.layout.width, page.layout.height);
     return { style: Math.round(styled - started), layout: Math.round(hostPerformance.now() - styled) };
   }
@@ -1247,9 +1268,9 @@ export async function createPageRenderer({
   function rebuildRenderTree(reason = "update") {
     const started = hostPerformance.now();
     page.dirty = false;
-    page.needsPaint = true;
     page.title = page.document?.title ?? page.title;
     const timing = styleAndLayout();
+    if (!timing.skipped) page.needsPaint = true;
     lastRebuildMs = hostPerformance.now() - started;
     trace?.(`${page.url}: restyle and relayout (${reason}) ${Math.round(lastRebuildMs)}ms`
       + ` (style ${timing.style}ms for ${styleEngine.incremental ? styleEngine.restyled : "all"} elements: ${lastStyleReason}; ${lastStyleParts}, layout ${timing.layout}ms)`);
@@ -1329,6 +1350,7 @@ export async function createPageRenderer({
     const linkSheets = isHtml ? new WeakMap() : null;
     const styleSheets = isHtml ? loadStyleSheets(parsed.document, url, linkSheets) : Promise.resolve([]);
     const images = isHtml ? loadImageResources(parsed.document, url) : Promise.resolve(emptyImageResources());
+    page.preloadedScripts = isHtml && page.scripting !== "off" ? preloadScripts(parsed.document, url) : new Map();
     let imagesReady = null;
     images.then((loaded) => { imagesReady = loaded; });
     let timer;
@@ -1387,6 +1409,31 @@ export async function createPageRenderer({
     }
   }
 
+  /**
+   * Like a browser's preload scanner: starts fetching the document's external
+   * scripts and declared module preloads (<link rel=modulepreload>) as soon
+   * as it is parsed, while its stylesheets load and it is styled, instead of
+   * when the scripts' turn comes and a module graph is discovered level by
+   * level. Only the bytes are fetched early; fetchScript() takes them.
+   */
+  function preloadScripts(document, documentUrl) {
+    const preloaded = new Map();
+    const preload = (href) => {
+      let target;
+      try { target = new URL(href, documentUrl); } catch { return; }
+      if (!["http:", "https:"].includes(target.protocol) || preloaded.has(target.href)) return;
+      const response = fetchResource(target.href, "script");
+      response.catch(() => {}); // reported when the script runs
+      preloaded.set(target.href, response);
+    };
+    for (const script of document.querySelectorAll("script[src]")) {
+      const type = (script.getAttribute("type") ?? "").trim().toLowerCase();
+      if (type === "module" || (CLASSIC_SCRIPT_TYPES.has(type) && !script.hasAttribute("nomodule"))) preload(script.getAttribute("src"));
+    }
+    for (const link of document.querySelectorAll("link[rel~='modulepreload'][href]")) preload(link.getAttribute("href"));
+    return preloaded;
+  }
+
   /** Frees what a superseded load fetched. */
   async function discard(images, parsed = null) {
     parsed?.window?.happyDOM?.abort?.();
@@ -1420,6 +1467,7 @@ export async function createPageRenderer({
         page.decodedImages.push(resource.image);
       }
       page.dirty = true;
+      page.resourceLayoutDirty = true;
       scheduleFrame();
     }, () => {});
   }
@@ -1514,12 +1562,14 @@ export async function createPageRenderer({
     return {
       definedChanged(name) {
         // An upgrade changes :defined for that tag's elements only.
-        if (selectorTraits.defined) for (const element of page.document.getElementsByTagName(String(name))) markStyleDirty(element);
+        if (selectorTraits.defined) {
+          for (const element of page.document.getElementsByTagName(String(name))) markStyleDirty(element, [":defined"]);
+        }
         page.dirty = true;
         scheduleFrame();
       },
-      touch(node = null) {
-        markStyleDirty(node);
+      touch(node = null, stateFeatures = []) {
+        if (stateFeatures.length) markStyleDirty(node, stateFeatures);
         page.dirty = true;
         scheduleFrame();
       },
@@ -1575,7 +1625,9 @@ export async function createPageRenderer({
           if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
           return response.text();
         }
-        const response = await fetchResource(url, "script");
+        const preloaded = page.preloadedScripts.get(url);
+        if (preloaded) page.preloadedScripts.delete(url);
+        const response = await (preloaded ?? fetchResource(url, "script"));
         if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
         return new TextDecoder().decode(response.body);
       },
@@ -2604,7 +2656,25 @@ export async function createPageRenderer({
         }
         page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
         page.decodedImages.push(image);
-        page.dirty = true;
+        const node = [...page.renderTree.nodesById.values()].find((candidate) => candidate.domNode === element);
+        const run = page.layout.fragments.flatMap((fragment) => fragment.runs)
+          .find((candidate) => candidate.type === "image" && candidate.nodeId === node?.id);
+        const cssWidth = node?.style?.width;
+        const cssHeight = node?.style?.height;
+        const specifiedWidth = typeof cssWidth === "number" ? cssWidth : node?.widthAttribute;
+        const specifiedHeight = typeof cssHeight === "number" ? cssHeight : node?.heightAttribute;
+        // When both used dimensions were already fixed, decoded pixels only
+        // change paint. The retained layout remains authoritative and the
+        // display list resolves the current resource by DOM node.
+        const paintOnly = run && Number.isFinite(specifiedWidth) && Number.isFinite(specifiedHeight)
+          && Math.abs(run.width - specifiedWidth) < 0.01 && Math.abs(run.height - specifiedHeight) < 0.01;
+        if (paintOnly) {
+          page.displayList = buildDisplayList(page.layout, page.renderTree, page.resources);
+          page.needsPaint = true;
+        } else {
+          page.dirty = true;
+          page.resourceLayoutDirty = true;
+        }
         refresh();
       }).catch(() => {
         // A failed image retains its fallback replaced-element dimensions.
@@ -2614,114 +2684,6 @@ export async function createPageRenderer({
   }
 }
 
-/** Splits at top-level `separator` (outside (), [] and quotes). */
-function splitTopLevelText(text, separator) {
-  const parts = [];
-  let depth = 0;
-  let quote = "";
-  let start = 0;
-  for (let index = 0; index < text.length; index++) {
-    const character = text[index];
-    if (quote) { if (character === "\\") index++; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    else if (character === "\\") index++;
-    else if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    else if (character === separator && depth === 0) { parts.push(text.slice(start, index).trim()); start = index + 1; }
-  }
-  parts.push(text.slice(start).trim());
-  return parts.filter(Boolean);
-}
-
-const STATE_PSEUDO = /:(?:checked|indeterminate|default|disabled|enabled|placeholder-shown|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|user-valid|user-invalid|autofill|open|popover-open|modal|target|focus|focus-visible|focus-within|hover|active|visited|link|any-link|defined|fullscreen)\b/;
-
-/** CSS escapes in an identifier (".\\:popover-open", "\\31 a") resolved. */
-function cssUnescape(text) {
-  return text.replace(/\\([0-9a-fA-F]{1,6})\s?/g, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/\\(.)/g, "$1");
-}
-
-/** Invalidation features a compound selector mentions (see selectorTraitsFor). */
-function compoundFeatures(compound) {
-  const features = [];
-  const plain = compound.replace(/\[[^\]]*\]/g, (attribute) => {
-    const name = /^\[\s*([\w-]+)/.exec(attribute)?.[1];
-    if (name) features.push("[" + name.toLowerCase());
-    return "";
-  });
-  for (const match of plain.matchAll(/([.#])((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w\u00a0-\uffff-])+)/g)) features.push(match[1] + cssUnescape(match[2]));
-  const tag = /^(?:[a-zA-Z][\w-]*)/.exec(plain)?.[0];
-  if (tag) features.push("t:" + tag.toLowerCase());
-  if (STATE_PSEUDO.test(plain)) features.push(":state");
-  // Nothing but a universal selector or pseudo-classes: it can match anything.
-  if (!features.length || /^\*/.test(plain)) features.push("*");
-  return features;
-}
-
-/** The features an element has (for a sibling it inserts next to, for example). */
-function elementFeatures(element) {
-  const features = ["t:" + element.localName];
-  const id = element.getAttribute("id");
-  if (id) features.push("#" + id);
-  for (const name of element.classList) features.push("." + name);
-  for (const attribute of element.attributes) features.push("[" + attribute.name);
-  return features;
-}
-
-/** A complex selector's compounds with the combinator after each (" ", ">", "+", "~", or null for the subject). */
-function complexParts(selector) {
-  const parts = [];
-  let depth = 0;
-  let quote = "";
-  let current = "";
-  let combinator = null;
-  const flush = () => {
-    if (current) parts.push({ compound: current, combinator: null });
-    current = "";
-  };
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (quote) { current += character; if (character === "\\") current += selector[++index] ?? ""; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    if (character === "\\") { current += character + (selector[++index] ?? ""); continue; }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && /[\s>+~]/.test(character)) {
-      flush();
-      combinator = character.trim() ? character : combinator ?? " ";
-      if (character.trim() && parts.length) parts.at(-1).combinator = character;
-      else if (parts.length && parts.at(-1).combinator === null) parts.at(-1).combinator = " ";
-      continue;
-    }
-    current += character;
-  }
-  flush();
-  return parts;
-}
-
-/** The compound selectors of a complex selector (split at top-level combinators). */
-function compoundsOf(selector) {
-  const compounds = [];
-  let depth = 0;
-  let quote = "";
-  let current = "";
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (quote) { current += character; if (character === "\\") current += selector[++index] ?? ""; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    if (character === "\\") { current += character + (selector[++index] ?? ""); continue; }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && /[\s>+~]/.test(character)) {
-      if (current) compounds.push(current);
-      current = "";
-      continue;
-    }
-    current += character;
-  }
-  if (current) compounds.push(current);
-  return compounds;
-}
-
 function canvasColor(CanvasKit, value) {
   const match = /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/.exec(value);
   return match