buninu-browser 0.1.0 → 0.2.1

package/lib/network/network-service.js

@@ -15,6 +15,7 @@ import { fetchResolved, HostResolver } from "./resolver.js";
 
 const MAX_REDIRECTS = 20;
 const MAX_BODY_BYTES = 64 * 1024 * 1024;
+const MAX_CACHED_SUBRESOURCES = 256;
 const SIMPLE_METHODS = new Set(["GET", "HEAD", "POST"]);
 const FORBIDDEN_METHODS = new Set(["CONNECT", "TRACE", "TRACK"]);
 // Fetch §2.2.2 CORS-safelisted request headers (value checks simplified).
@@ -29,12 +30,23 @@ const FORBIDDEN_REQUEST_HEADERS = new Set([
 const SAFELISTED_RESPONSE_HEADERS = new Set([
   "cache-control", "content-language", "content-length", "content-type", "expires", "last-modified", "pragma",
 ]);
+// Requests in flight to one host at a time, as browsers allow over HTTP/1.1.
+const MAX_REQUESTS_PER_HOST = 6;
+// Which waiting request to a busy host goes next (lower first): documents,
+// then what blocks rendering or that a script waits for, then the rest.
+const PRIORITY = { document: 0, stylesheet: 1, fetch: 1, script: 2, metadata: 2, image: 3, video: 3, audio: 3 };
 
 export class NetworkService {
   #fetch;
   #resolver;
   #cookies;
   #userAgent;
+  // Browser-process HTTP cache. Entries are partitioned by the request
+  // credentials that affect a subresource response; concurrent identical
+  // requests share one transfer.
+  #subresourceCache = new Map();
+  #subresourceInflight = new Map();
+  #hosts = new HostThrottle(MAX_REQUESTS_PER_HOST);
 
   /**
    * `resolver` looks host names up itself (see resolver.js); it is on for the
@@ -55,21 +67,63 @@ export class NetworkService {
   }
 
   set userAgent(value) {
-    this.#userAgent = typeof value === "string" && value ? value : null;
+    const next = typeof value === "string" && value ? value : null;
+    if (next !== this.#userAgent) this.#subresourceCache.clear();
+    this.#userAgent = next;
   }
 
   /** A top-level document load. */
-  async navigate(url) {
+  async navigate(url, { onResponse } = {}) {
     return this.#send({ url, method: "GET", headers: [], body: null }, {
       credentials: "include", site: null, topLevelNavigation: true,
-    });
+    }, { onResponse, priority: PRIORITY.document });
   }
 
-  /** A subresource the renderer needs to render (no-cors, credentials included). */
-  async subresource(url, documentUrl) {
-    return this.#send({ url, method: "GET", headers: [], body: null }, {
-      credentials: "include", site: siteOf(documentUrl),
-    });
+  /**
+   * A subresource the renderer needs to render (no-cors, credentials included).
+   * `kind` ("stylesheet", "script", "image"...) decides its turn at a busy host.
+   */
+  async subresource(url, documentUrl, kind = "metadata") {
+    const site = siteOf(documentUrl);
+    const cookie = this.#cookies.header(url, { site });
+    const key = `${url}\n${site ?? ""}\n${cookie}\n${this.#userAgent ?? ""}`;
+    const cached = this.#subresourceCache.get(key);
+    if (cached && cached.expires > Date.now()) return cached.result;
+    const pending = this.#subresourceInflight.get(key);
+    if (pending) return pending;
+    const request = (async () => {
+      const headers = cached?.etag ? [["if-none-match", cached.etag]] : [];
+      let result = await this.#send({ url, method: "GET", headers, body: null }, {
+        credentials: "include", site,
+      }, { priority: PRIORITY[kind] ?? PRIORITY.metadata });
+      if (result.status === 304 && cached) {
+        const rawHeaders = [...new Map([...cached.result.rawHeaders, ...result.rawHeaders])];
+        result = {
+          ...cached.result,
+          rawHeaders,
+          headers: [...new Map([...cached.result.headers, ...result.headers])],
+        };
+        const policy = cachePolicy(rawHeaders);
+        cached.expires = policy.expires;
+        return result;
+      }
+      const policy = cachePolicy(result.rawHeaders);
+      if (result.ok && policy.cacheable) {
+        if (!this.#subresourceCache.has(key) && this.#subresourceCache.size >= MAX_CACHED_SUBRESOURCES) {
+          this.#subresourceCache.delete(this.#subresourceCache.keys().next().value);
+        }
+        this.#subresourceCache.set(key, { result, expires: policy.expires, etag: policy.etag });
+      } else {
+        this.#subresourceCache.delete(key);
+      }
+      return result;
+    })();
+    this.#subresourceInflight.set(key, request);
+    try {
+      return await request;
+    } finally {
+      if (this.#subresourceInflight.get(key) === request) this.#subresourceInflight.delete(key);
+    }
   }
 
   /**
@@ -131,19 +185,19 @@ export class NetworkService {
 
     if (sameOrigin) {
       return this.#send({ url: url.href, method, headers, body: request.body ?? null }, context, {
-        redirect: request.redirect ?? "follow", corsOrigin: null,
+        redirect: request.redirect ?? "follow", corsOrigin: null, priority: PRIORITY.fetch,
       });
     }
     if (mode === "no-cors") {
       const response = await this.#send({ url: url.href, method, headers: headers.filter(isSafelistedHeader), body: request.body ?? null },
-        context, { redirect: "follow", corsOrigin: null });
+        context, { redirect: "follow", corsOrigin: null, priority: PRIORITY.fetch });
       return { ...response, type: "opaque", status: 0, statusText: "", url: "", headers: [], body: new Uint8Array(0), redirected: false };
     }
     // CORS: preflight unless the request is "simple" (Fetch §4.8).
     const needsPreflight = !SIMPLE_METHODS.has(method) || headers.some((header) => !isSafelistedHeader(header));
     if (needsPreflight) await this.#preflight(url, method, headers, origin, context);
     const response = await this.#send({ url: url.href, method, headers, body: request.body ?? null }, context, {
-      redirect: request.redirect ?? "follow", corsOrigin: origin,
+      redirect: request.redirect ?? "follow", corsOrigin: origin, priority: PRIORITY.fetch,
     });
     const allowed = corsAllowed(response.rawHeaders, origin, context.credentials === "include");
     if (!allowed) throw new TypeError(`CORS: ${url.href} did not allow origin ${origin}`);
@@ -159,17 +213,23 @@ export class NetworkService {
 
   async #preflight(url, method, headers, origin, context) {
     const requestHeaders = headers.filter((entry) => !isSafelistedHeader(entry)).map(([name]) => name).sort();
-    const response = await this.#request(url.href, {
-      method: "OPTIONS",
-      redirect: "manual",
-      headers: {
-        origin,
-        "access-control-request-method": method,
-        ...(requestHeaders.length ? { "access-control-request-headers": requestHeaders.join(",") } : {}),
-        ...(this.#userAgent ? { "user-agent": this.#userAgent } : {}),
-      },
-    });
-    await response.arrayBuffer().catch(() => {});
+    const release = await this.#hosts.acquire(url.href, PRIORITY.fetch);
+    let response;
+    try {
+      response = await this.#request(url.href, {
+        method: "OPTIONS",
+        redirect: "manual",
+        headers: {
+          origin,
+          "access-control-request-method": method,
+          ...(requestHeaders.length ? { "access-control-request-headers": requestHeaders.join(",") } : {}),
+          ...(this.#userAgent ? { "user-agent": this.#userAgent } : {}),
+        },
+      });
+      await response.arrayBuffer().catch(() => {});
+    } finally {
+      release();
+    }
     const raw = [...response.headers];
     if (response.status < 200 || response.status > 299 || !corsAllowed(raw, origin, context.credentials === "include")) {
       throw new TypeError(`CORS preflight for ${url.href} was rejected`);
@@ -191,8 +251,11 @@ export class NetworkService {
     return this.#resolver ? fetchResolved(this.#fetch, this.#resolver, url, init) : this.#fetch(url, init);
   }
 
-  /** Sends a request, following redirects by hand so cookies apply to every hop. */
-  async #send(request, context, { redirect = "follow", corsOrigin = null } = {}) {
+  /**
+   * Sends a request, following redirects by hand so cookies apply to every hop.
+   * Each hop holds one of its host's request slots until its body is read.
+   */
+  async #send(request, context, { redirect = "follow", corsOrigin = null, onResponse = null, priority = PRIORITY.metadata } = {}) {
     let { url, method, body } = request;
     const baseHeaders = request.headers;
     let redirected = false;
@@ -206,24 +269,33 @@ export class NetworkService {
         });
         if (cookie) headers.set("cookie", cookie);
       }
-      const response = await this.#request(url, { method, headers, body, redirect: "manual" });
-      if (context.credentials === "include") this.#cookies.store(url, response.headers.getSetCookie?.() ?? []);
-      const location = response.headers.get("location");
-      if ([301, 302, 303, 307, 308].includes(response.status) && location) {
-        await response.arrayBuffer().catch(() => {});
-        if (redirect === "error") throw new TypeError("Redirect was not allowed");
-        if (redirect === "manual") return this.#result(response, url, redirected, "opaqueredirect");
-        const next = new URL(location, url);
-        if (!["http:", "https:"].includes(next.protocol)) throw new TypeError(`Redirect to ${next.protocol} is not allowed`);
-        if (response.status === 303 || ((response.status === 301 || response.status === 302) && method === "POST")) {
-          method = method === "HEAD" ? "HEAD" : "GET";
-          body = null;
+      const release = await this.#hosts.acquire(url, priority);
+      try {
+        const response = await this.#request(url, { method, headers, body, redirect: "manual" });
+        if (context.credentials === "include") this.#cookies.store(url, response.headers.getSetCookie?.() ?? []);
+        const location = response.headers.get("location");
+        if ([301, 302, 303, 307, 308].includes(response.status) && location) {
+          await response.arrayBuffer().catch(() => {});
+          if (redirect === "error") throw new TypeError("Redirect was not allowed");
+          if (redirect === "manual") return await this.#result(response, url, redirected, "opaqueredirect");
+          const next = new URL(location, url);
+          if (!["http:", "https:"].includes(next.protocol)) throw new TypeError(`Redirect to ${next.protocol} is not allowed`);
+          if (response.status === 303 || ((response.status === 301 || response.status === 302) && method === "POST")) {
+            method = method === "HEAD" ? "HEAD" : "GET";
+            body = null;
+          }
+          url = next.href;
+          redirected = true;
+          continue;
         }
-        url = next.href;
-        redirected = true;
-        continue;
+        if (onResponse) {
+          const handled = await onResponse(response, url);
+          if (handled) return handled;
+        }
+        return await this.#result(response, url, redirected, "basic");
+      } finally {
+        release();
       }
-      return this.#result(response, url, redirected, "basic");
     }
     throw new TypeError("Too many redirects");
   }
@@ -258,6 +330,20 @@ function header(rawHeaders, name) {
   return rawHeaders.find(([key]) => key === name)?.[1] ?? null;
 }
 
+/** Freshness and validator data used by the in-process HTTP cache. */
+function cachePolicy(rawHeaders, now = Date.now()) {
+  const control = (header(rawHeaders, "cache-control") ?? "").toLowerCase();
+  if (/(?:^|,)\s*no-store(?:\s|,|$)/.test(control)) return { cacheable: false, expires: 0, etag: null };
+  const age = control.match(/(?:^|,)\s*max-age\s*=\s*(\d+)/)?.[1];
+  const expiresHeader = header(rawHeaders, "expires");
+  const expires = age !== undefined
+    ? now + Number(age) * 1000
+    : expiresHeader && Number.isFinite(Date.parse(expiresHeader)) ? Date.parse(expiresHeader)
+      : /(?:^|,)\s*immutable(?:\s|,|$)/.test(control) ? now + 365 * 24 * 60 * 60 * 1000 : 0;
+  const etag = header(rawHeaders, "etag");
+  return { cacheable: expires > now || etag !== null, expires, etag };
+}
+
 /** Fetch §4.9 CORS check. */
 function corsAllowed(rawHeaders, origin, withCredentials) {
   const allowOrigin = header(rawHeaders, "access-control-allow-origin");
@@ -266,3 +352,54 @@ function corsAllowed(rawHeaders, origin, withCredentials) {
   if (allowOrigin !== origin) return false;
   return !withCredentials || header(rawHeaders, "access-control-allow-credentials") === "true";
 }
+
+/**
+ * Limits the requests in flight to each host (scheme, host and port). A burst
+ * of requests that each open a connection slows every transfer, and servers
+ * reset some; with a few connections kept alive and reused, a page's
+ * resources arrive sooner. Waiting requests go by priority, then in order.
+ */
+class HostThrottle {
+  #limit;
+  #hosts = new Map();
+
+  constructor(limit) {
+    this.#limit = limit;
+  }
+
+  /** Resolves with a function that gives the slot back (once) when the request is done. */
+  acquire(url, priority) {
+    let key;
+    try {
+      const target = new URL(url);
+      key = `${target.protocol}//${target.host}`;
+    } catch {
+      key = String(url);
+    }
+    let host = this.#hosts.get(key);
+    if (!host) this.#hosts.set(key, host = { active: 0, waiting: [] });
+    const release = this.#releaser(key, host);
+    if (host.active < this.#limit) {
+      host.active++;
+      return Promise.resolve(release);
+    }
+    return new Promise((resolve) => {
+      const entry = { priority, start: () => resolve(release) };
+      const index = host.waiting.findIndex((other) => other.priority > priority);
+      if (index === -1) host.waiting.push(entry);
+      else host.waiting.splice(index, 0, entry);
+    });
+  }
+
+  #releaser(key, host) {
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      const next = host.waiting.shift();
+      if (next) next.start(); // the slot passes on
+      else if (--host.active === 0) this.#hosts.delete(key);
+    };
+  }
+}
+

package/lib/network/resolver.js

@@ -12,11 +12,20 @@
  * each with its own socket), and requests connect to an address directly
  * while keeping the host name for the Host header and for TLS (SNI and
  * certificate verification). This also covers musl, which has no such option.
+ *
+ * `localhost` and `*.localhost` are loopback without asking anyone (RFC 6761
+ * §6.3, as Chrome and Bun's own socket resolver do): node:dns hands them to
+ * the system getaddrinfo(), which needs an /etc/hosts entry that minimal
+ * systems (an initramfs, containers) may not have.
  */
 import { lookup as systemLookup } from "node:dns/promises";
 import { isIP } from "node:net";
 
 const DEFAULT_TTL_MS = 60_000;
+const LOOPBACK = Object.freeze([
+  Object.freeze({ address: "127.0.0.1", family: 4 }),
+  Object.freeze({ address: "::1", family: 6 }),
+]);
 // Errors that mean "this address did not answer": try the next one.
 const CONNECT_ERRORS = new Set([
   "ECONNREFUSED", "ETIMEDOUT", "EHOSTUNREACH", "ENETUNREACH", "EADDRNOTAVAIL",
@@ -41,6 +50,7 @@ export class HostResolver {
   /** Addresses for a host name, IPv4 first, then IPv6. */
   addresses(hostname) {
     const name = hostname.toLowerCase();
+    if (isLocalhostName(name)) return Promise.resolve(LOOPBACK);
     const cached = this.#cache.get(name);
     if (cached && cached.expires > this.#now()) return cached.addresses;
     const addresses = this.#resolve(name);
@@ -70,6 +80,12 @@ export class HostResolver {
   }
 }
 
+/** `localhost` or a name under `.localhost` (one trailing dot allowed), lowercase. */
+export function isLocalhostName(name) {
+  const host = name.endsWith(".") ? name.slice(0, -1) : name;
+  return host === "localhost" || host.endsWith(".localhost");
+}
+
 /**
  * fetch() that connects to a resolved address, keeping the host name for the
  * Host header and TLS. IP literals and non-HTTP URLs go to `fetchImpl` as is.

package/lib/paint/display-list.js

@@ -24,7 +24,7 @@ const TRANSPARENT = "rgba(0, 0, 0, 0)";
  * @param tree the render tree it was laid out from; without it, visibility,
  *   opacity and overflow clipping of ancestors are not applied.
  */
-export function buildDisplayList(layout, tree = null) {
+export function buildDisplayList(layout, tree = null, resources = null) {
   const items = [];
   const images = [];
   const effects = paintEffects(layout, tree);
@@ -156,15 +156,18 @@ export function buildDisplayList(layout, tree = null) {
         return;
       }
       if (run.type === "image") {
-        if (run.video) {
+        const currentResource = resources && tree
+          ? resources.get(tree.nodesById.get(run.nodeId)?.domNode) ?? run.resource
+          : run.resource;
+        if (run.video || run.audio) {
           const rect = { x: run.x, y, width: run.width, height: run.height };
-          images.push(run.resource);
-          items.push({ op: "drawVideo", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
+          images.push(currentResource);
+          items.push({ op: run.video ? "drawVideo" : "drawAudio", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
           return;
         }
-        if (!run.resource?.image) return;
+        if (!currentResource?.image) return;
         const rect = { x: run.x, y, width: run.width, height: run.height };
-        images.push(run.resource);
+        images.push(currentResource);
         items.push({
           op: "drawImage", nodeId: run.nodeId, image: images.length - 1, rect, radii: cornerRadii(run.style, rect), bounds: rect,
         });
@@ -223,17 +226,27 @@ function paintEffects(layout, tree) {
   const boxes = new Map();
   for (const box of layout.boxes) if (!box.inline && !boxes.has(box.nodeId)) boxes.set(box.nodeId, box);
   const cache = new Map();
+  // Each element's own clips, worked out once for all the items below it.
+  const memo = (compute) => {
+    const results = new Map();
+    return (node) => {
+      if (results.has(node)) return results.get(node);
+      const result = compute(node);
+      results.set(node, result === null ? null : Object.freeze(result));
+      return results.get(node);
+    };
+  };
 
   // The clip an element applies to its descendants (and, for clip/clip-path, to itself).
-  const overflowClip = (node) => {
+  const overflowClip = memo((node) => {
     const style = node.style;
     const box = boxes.get(node.id);
     if (!style || !box || node === tree.root) return null;
     if (style.overflowX !== "clip" && style.overflowY !== "clip") return null;
     const [top, right, bottom, left] = style.borderWidths ?? [0, 0, 0, 0];
     return { x: box.x + left, y: box.y + top, width: box.width - left - right, height: box.height - top - bottom };
-  };
-  const shapeClip = (node) => {
+  });
+  const shapeClip = memo((node) => {
     const style = node.style;
     const box = boxes.get(node.id);
     if (!style || !box) return null;
@@ -253,7 +266,7 @@ function paintEffects(layout, tree) {
       rect = intersectRects(rect, { x: x0, y: y0, width: x1 - x0, height: y1 - y0 });
     }
     return rect;
-  };
+  });
 
   return (nodeId, kind) => {
     const key = `${kind}:${nodeId}`;
@@ -351,7 +364,9 @@ function inflate(rect, amount) {
   return { x: rect.x - amount, y: rect.y - amount, width: rect.width + amount * 2, height: rect.height + amount * 2 };
 }
 
+/** Freezes an item and what it holds; frozen values (shared clips, style data) are already done. */
 function deepFreeze(value) {
+  if (Object.isFrozen(value)) return value;
   for (const child of Object.values(value)) {
     if (child && typeof child === "object") deepFreeze(child);
   }

package/lib/render-tree/index.js

@@ -30,6 +30,7 @@ const BLOCK_ELEMENTS = new Set([
  */
 export class RenderTreeBuilder {
   #ids = new WeakMap();
+  #previous = new WeakMap();
   #pseudoKeys = new WeakMap();
   #nextId = 1;
   #generation = 0;
@@ -71,12 +72,18 @@ export class RenderTreeBuilder {
   }
 
   #node(domNode, type, nodesById, properties, idKey = domNode) {
+    const previous = this.#previous.get(idKey);
+    if (previous && sameNodeProperties(previous, type, properties)) {
+      nodesById.set(previous.id, previous);
+      return previous;
+    }
     const node = Object.freeze({
       id: this.#id(idKey),
       type,
       domNode,
       ...properties,
     });
+    this.#previous.set(idKey, node);
     nodesById.set(node.id, node);
     return node;
   }
@@ -185,6 +192,19 @@ export class RenderTreeBuilder {
         children: Object.freeze([]),
       });
     }
+    // Audio is a 300x32 player (painted like video's controls) with the
+    // controls attribute, and not rendered without it (HTML §4.8.11.13).
+    if (element.tagName === "AUDIO") {
+      if (!element.hasAttribute("controls")) return null;
+      return this.#node(element, "image", nodesById, {
+        tagName: "AUDIO",
+        style,
+        resource: resources?.get(element) ?? null,
+        widthAttribute: positiveDimension(element.getAttribute("width")) ?? 300,
+        heightAttribute: 32,
+        children: Object.freeze([]),
+      });
+    }
     if (element.tagName === "IMG" || element.tagName === "VIDEO") {
       return this.#node(element, "image", nodesById, {
         tagName: element.tagName,
@@ -229,6 +249,44 @@ export class RenderTreeBuilder {
   }
 }
 
+function sameNodeProperties(previous, type, properties) {
+  if (previous.type !== type || Object.keys(previous).length !== Object.keys(properties).length + 3) return false;
+  for (const [key, value] of Object.entries(properties)) {
+    const old = previous[key];
+    if (old === value) continue;
+    if (key !== "children" || old.length !== value.length) return false;
+    for (let index = 0; index < old.length; index++) if (old[index] !== value[index]) return false;
+  }
+  return true;
+}
+
+/**
+ * Whether two generations provide identical input to layout. Node IDs are
+ * stable for retained DOM nodes, while computed styles and decoded resources
+ * are immutable values shared between generations. Callers which separately
+ * track whether resource dimensions changed may ignore resource identity.
+ */
+export function sameLayoutInput(left, right, options = {}) {
+  if (left === right) return true;
+  if (!left || !right || left.id !== right.id || left.type !== right.type
+    || (!options.ignoreStyles && left.style !== right.style) || left.tagName !== right.tagName
+    || left.text !== right.text || left.pseudo !== right.pseudo
+    || (!options.ignoreResources && left.resource !== right.resource)
+    || !sameSvg(left.svg, right.svg)
+    || left.widthAttribute !== right.widthAttribute || left.heightAttribute !== right.heightAttribute
+    || left.children.length !== right.children.length) return false;
+  for (let index = 0; index < left.children.length; index++) {
+    if (!sameLayoutInput(left.children[index], right.children[index], options)) return false;
+  }
+  return true;
+}
+
+function sameSvg(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
 function boxType(style, tagName = null) {
   const display = style?.display;
   if (["flex", "inline-flex", "inline-block", "grid", "inline-grid"].includes(display)) return display;