Chrome 148 宣告式串流更新：Out-of-Order HTML 與新版插入 API
Chrome for Developers · 2026-05-19
Chrome 148 引入兩組實驗性 API，解決 HTML 必須按文件順序傳輸的長期限制。宣告式部分更新（Declarative Partial Updates）讓伺服器在串流回應中亂序注入內容區塊，同時提供一套語義一致的 JavaScript 插入方法，取代過去行為不明確的 innerHTML。兩項功能均已在 Chrome 148 的旗標版本（chrome://flags/#enable-experimental-web-platform-features）中開放測試。
原本的問題
傳統 HTTP 串流的根本限制是瀏覽器只能依序解析標記：若某個區塊的資料最慢才抵達，整個頁面渲染就得等它。現有解法不外乎 React Suspense 等 SSR 框架（需要大量 JS 執行）或手動 innerHTML 插入（位置控制精度不足且存在 XSS 風險）。這在 AI 串流回應、儀表板中獨立並行取得的資料區塊等場景尤為明顯。
Out-of-Order Streaming：處理指令 + template
新機制以 XML 處理指令作為預留位置標記，配合 <template for="..."> 元素達成亂序更新。伺服器先在頁面任意位置放置 <?marker name="price"?>，瀏覽器遇到時只記錄位置，不渲染任何內容。等到串流後段傳來對應的 <template for="price">，瀏覽器才回填。
<div><?marker name="price"?></div>
...（其他先到的內容先渲染）...
<template for="price">NT$1,200</template>安全限制：<template for> 只能更新同一父元素內的 marker，防止跨元素注入攻擊。元素在串流中重新父化（re-parenting）會導致未定義行為。
新版 JavaScript 插入 API
Chrome 148 同時提供一組語義明確的插入方法，統一 innerHTML、insertAdjacentHTML、DOMParser 三種 API 長期行為不一致的問題：
element.setHTML(html)：取代 innerHTML，預設啟用 Sanitizer APIelement.appendHTML(html)：追加 HTML 片段element.streamHTML(stream)：接受 ReadableStream，邊傳邊解析element.setHTMLUnsafe(html)/appendHTMLUnsafe(html)：不啟用 Sanitizer，適用於已信任的內容
影響範圍
Out-of-Order Streaming 的主要受益場景是伺服器端渲染框架：AI 串流回應（如 ChatGPT-like 介面）、電商產品頁的即時庫存區域，以及儀表板中各來源獨立並行抓取的資料區塊，都可以不必等待最慢的資料源。Polyfill 以緩衝模式提供，無法在舊版瀏覽器重現真正的串流效果。規格草案正在 WICG 中持續討論，預計在 Chrome 150 前進入正式 Origin Trial。
HTML-in-Canvas API Origin Trial：DOM 元素直接繪入 Canvas 並保留無障礙能力
Chrome for Developers · 2026-05-19
Chrome 148–150 開放 HTML-in-Canvas API Origin Trial，允許開發者將任何 DOM 元素繪製進 2D Canvas、WebGL 材質或 WebGPU 材質，同時保留文字選取、無障礙樹（accessibility tree）、頁內搜尋等瀏覽器原生功能。過去開發者面臨的兩難是：DOM 功能豐富但渲染受限，Canvas 效能高但缺乏語意——此 API 在兩者之間架橋。
技術機制
使用 API 前需在 <canvas> 元素加上 layoutsubtree 屬性，告知瀏覽器此畫布需要 DOM 版面計算（layout）的參與。繪製時依渲染上下文呼叫對應方法：
- 2D Canvas：
ctx.drawElementImage(element, x, y) - WebGL：
gl.texElementImage2D(..., element, ...) - WebGPU：
device.queue.copyElementImageToTexture(..., {element}, ...)
完成繪製後呼叫 element.getElementTransform() 取得 CSS 變換矩陣，再回寫至元素的 CSS，確保 DOM 版面與畫布像素對齊。
保留的原生能力
這是此 API 的核心價值：繪入 Canvas 的 DOM 內容仍維持可互動狀態，包含文字選取與複製、AT（輔助技術）可見的 accessibility tree、瀏覽器的 Ctrl+F 頁內搜尋、表單控制項的原生行為，以及 DevTools 的元素檢查。這些在過去的 Canvas 繪製流程中一律失效。
限制與可用性
跨來源 iframe 因隱私考量無法繪入；Canvas 內的捲動與動畫依賴 JavaScript 驅動，非原生滾動。Origin Trial 適用 Chrome 148–150，需至 Chrome Origin Trials 平台申請 token；也可使用 Chrome Canary 149+ 並啟用 chrome://flags/#canvas-draw-element 旗標直接測試。受益最大的使用場景包含在 WebGL/WebGPU 場景中疊加 HTML 標籤的資料視覺化工具、在 Three.js 場景中嵌入 HTML 覆層的 XR 應用，以及需要可選取文字的 PDF 渲染器。
Deno 2.8：import defer、六個新子命令與 3.7× 加速的 npm 安裝
Deno Blog · 2026-05-22
Deno 2.8 於 2026 年 5 月 22 日發布，官方稱之為「有史以來最大的 minor release」。此版本整合 TypeScript 6.0.3、實作 TC39 import defer 提案、新增六個 CLI 子命令，並將冷啟動 npm 安裝效能提升 3.66×，Node.js 測試套件相容率從 42% 提升至超過 75%。
import defer：延遲執行的模組
import defer 實作 TC39 Deferred Module Evaluation 提案，語法與靜態 import 相同，但模組頂層程式碼直到第一次讀取其命名空間屬性時才執行。這讓懶載入不再需要動態 import() 或手動包裝：
import defer * as analytics from "./analytics.ts";
// analytics 的頂層代碼此時尚未執行
if (userOptedIn) {
analytics.init(); // 此處才觸發執行
}六個新子命令
deno ci：確認deno.lock存在、清除node_modules、以--frozen重新安裝，適合 CI 環境deno pack：將 Deno 或 JSR 專案打包為可發布至 npm 的 tarballdeno audit fix：自動升級有安全漏洞的依賴至最接近的修補版本deno transpile：單步將 TypeScript/JSX 轉譯為 JavaScriptdeno why：解釋為什麼某個套件被納入依賴樹deno bump-version：遵循 semver 自動遞增版本號並更新相關檔案
npm 安裝效能與 Node.js 相容性
以 React + Vite + Babel parser + ESLint 的組合為基準，冷啟動安裝時間從 3,319ms 降至 906ms（3.66×）。優化來自孤立連結器的全域儲存快取，重複安裝同一套件時直接複用，不再重新解壓縮。Chrome DevTools 的網路面板現在也可對 Deno 的 fetch 請求做 timeline 分析與中斷點攔截。
Deno 2.8 通過 Node.js 官方測試套件的 75% 以上，涵蓋幾乎所有 node: 內建模組。自 2.7 後有超過 500 個相容性 commit，尤其改善了 node:crypto、node:worker_threads、以及 cluster 模組的行為對齊。