TransformStream 适用于对 fetch 响应等流式 HTML 片段做渲染前脱敏，通过 pipeThrough 在解析为 DOM 前替换敏感文本；不适用于 Vue/React 响应式插值、innerHTML 赋值或静态 HTML 加载场景。
TransformStream 本身不直接参与 DOM 渲染流程，也不能在“DOM 节点渲染前”拦截或修改 HTML 字符串、AST 或 vnode——它工作在 流式字节/块数据层面（如 Fetch 响应体、文件读取、WebSocket 消息），适用于原始响应内容的实时转换。若目标是“对即将插入页面的敏感文本做动态脱敏”，关键不在 TransformStream 是否能操作 DOM，而在于把脱敏逻辑前置到数据进入渲染管线之前的位置。
明确适用场景：从 fetch 响应中脱敏 HTML 片段
这是 TransformStream 最自然的用武之地。比如后端返回一段含手机号、身份证号的 HTML 片段（非完整页面），前端需在解析成 DOM 前就清洗掉明文敏感信息：
- 用
fetch(url).then(r => r.body)获取可读流 - 构造 TransformStream，其
transform()方法对每块文本 chunk 做正则替换（如chunk.replace(/1[3-9]\d{9}/g, '1****5678')） - 将处理后的流传给
new Response(transformedStream).text()或直接用于DOMParser.parseFromString()
不适用但常被误解的场景
以下情况 不能靠 TransformStream 实现，需换用其他机制：
- Vue/React 组件内插值渲染：v-model 绑定的输入、{{ user.phone }} 这类响应式数据，脱敏应在 data/computed 层处理，而非流层面
-
innerHTML 直接赋值：若你写
el.innerHTML = rawHTML，浏览器会立刻开始解析和构建 DOM；此时流已结束，TransformStream 早已不可介入 -
静态 HTML 文件加载：浏览器通过
<script src="..."></script>或初始 HTML 加载时，没有 JS 可控的流入口，TransformStream 无从挂载
真正可行的“渲染前脱敏”组合方案
要达成“DOM 节点实际创建前完成脱敏”，需分层协作：
-
服务端优先：敏感字段默认返回脱敏后内容（如
"phone": "138****1234"），最安全高效 - 客户端流式增强：对 fetch 返回的 JSON 或 HTML 流，用 TransformStream 做二次校验与覆盖脱敏（防服务端漏处理）
-
框架层兜底：在 Vue 的
v-text指令或 React 的useMemo中封装脱敏函数，确保最终渲染值恒为脱敏态
一个最小可行示例（fetch + TransformStream + DOMParser）
假设后端返回纯 HTML 片段 <div>联系人：张三，电话：13912345678</div>：
async function fetchAndSanitize(url) {
const response = await fetch(url);
const stream = response.body;
const transformer = new TransformStream({
transform(chunk, controller) {
const text = new TextDecoder().decode(chunk);
// 简单手机号脱敏（生产环境请用更严谨的正则和上下文判断）
const sanitized = text.replace(/1[3-9]\d{9}/g, m => m.slice(0, 3) + '****' + m.slice(7));
controller.enqueue(new TextEncoder().encode(sanitized));
}
});
const sanitizedStream = stream.pipeThrough(transformer);
const sanitizedText = await new Response(sanitizedStream).text();
// 此时 sanitizedText 已脱敏，再解析为 DOM 安全
const parser = new DOMParser();
const doc = parser.parseFromString(sanitizedText, 'text/html');
return doc.body.firstElementChild;
}
// 使用
fetchAndSanitize('/api/profile.html').then(el => {
document.getElementById('container').appendChild(el);
});
