html字符串需先转为流（如readablestream）并经textdecoderstream解码为字符串，才能接入transformstream；fetch().body是典型上游源，transform中chunk为原始块，不可用dom api或跨块正则，纯文本操作才安全。
HTML 字符串本身不能直接进 TransformStream —— 它必须先变成流，且是字节块（Uint8Array）或解码后的字符串流。 直接对 innerHTML、DOMParser 或拼接好的 HTML 字符串调用 TransformStream，等于拿成品去套流水线，根本没机会“流式处理”。
fetch().body 是最常用也最靠谱的上游源头
只有真正带流特性的数据源才适合接 TransformStream。浏览器里目前稳定可用的就三类：Response.body、File.stream()、WebSocket 的 message 流（需手动包装成 ReadableStream）。其中 fetch().body 是最典型场景。
- 错误写法：
new TransformStream().readable.getReader()立刻报TypeError: readable is not readable—— 因为没接上游，流没启动 - 正确链路必须是：fetch →
body→TextDecoderStream→ 自定义TransformStream - 别试图从
JSON.stringify({ html: '<div>...</div>' })开始走管道；那只是字符串，得先包一层new ReadableStream({ start(c) { c.enqueue(htmlString); c.close(); } })才能塞进去
transform(chunk, controller) 里不能用 DOM API
chunk 是原始块，不是 DOM 节点，也不是完整 HTML 字符串。它可能是半截标签、被截断的手机号、甚至乱码二进制 —— 所有依赖结构的解析（比如 querySelector、innerHTML =）在这里都失效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正则替换要小心跨块：比如
13912345678可能被切成"13912"和"345678"两块，单靠chunk.replace(/1[3-9]\d{9}/g, '****')会漏掉 - 生产环境真要 HTML 脱敏或清洗，推荐用
htmlparser2的流式 parser，或自己缓存末尾未闭合的标签/数字片段做跨块拼接 - 如果你只是想转大小写、删空格、加前缀这类纯文本操作，
chunk.toUpperCase()或chunk.trim()是安全的
TextDecoderStream 是绕不开的中间层
TransformStream 默认收到的是 Uint8Array，不是字符串。不经过解码就直接 .replace()，正则永远匹配不上 —— 因为那是二进制数据，不是你眼睛看到的字符。
- 必须显式插入
new TextDecoderStream()，否则transform()里的chunk是Uint8Array，不是string -
TextDecoderStream在 Chrome 109+、Firefox 102+、Safari 16.4+ 已稳定支持；不用 polyfill - 不要手动
new TextDecoder().decode(chunk)—— 那是同步阻塞操作，会破坏流式节奏和背压机制
真正难的不是写 TransformStream，而是理解“流”在哪开始、在哪结束、中间哪些环节会切断语义。比如 fetch 返回的 HTML 片段，如果后端没设 Content-Type: text/html; charset=utf-8，TextDecoderStream 可能默认按 latin1 解码，导致中文变乱码——这种问题不会报错，但输出全歪了，得盯住网络面板的响应头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
