html缓存失效主因是动态内容导致cdn判定不可缓存，需剔除内联脚本、随机token等；流式解析应使用htmlparser2tokenizer而非dom构建；边缘仅支持字节块注入，须保留锚点上下文与缓存键一致性。
HTML结构臃肿会导致CDN边缘缓存失效
CDN边缘节点对HTML的缓存策略极度敏感，不是所有HTML都能被有效缓存。当页面包含大量内联脚本、动态生成的nonce、或服务端注入的随机csrf_token时，CDN会判定该HTML为“不可缓存”，直接回源——哪怕你配置了Cache-Control: public, max-age=3600也无效。
常见错误现象：X-Cache: MISS持续出现，Edge-Response-Time始终高于50ms，监控里回源率长期>30%。
- 避免在HTML中写死时间戳、用户ID、session_id等动态值；改用前端JS异步加载个性化内容
- 把
<script></script>和<style></style>内联块控制在1KB以内，超长内联会触发部分CDN的缓存拒绝逻辑 - 使用
data-*属性传递轻量上下文（如data-product-id="123"），而非拼接完整JSON字符串 - 确保
标签带lang和dir属性——某些CDN的Vary策略默认按Accept-Language分片，缺失lang会导致缓存碎片化
流式解析大HTML必须绕过DOM构建
网关层若用DOMParser或jsdom加载30MB+ HTML，V8堆内存必然OOM。CDN边缘节点资源更受限，根本无法承受完整DOM树构建开销。
正确做法是用htmlparser2的流式Tokenizer，在opentag/closetag回调中识别语义块，不累积全文本。
- 务必设
xmlMode: false，否则<img><br>等自闭合标签解析失败 - 不要在
text回调里拼接字符串——用Buffer暂存，按<section></section>或<article></article>边界切块 - 每个切片前注入
<!-- chunk-meta: {"offset": 12480, "id": "faq-3"} -->注释，下游可定位原始位置 -
WritableStream的highWaterMark建议设为64KB，防止下游消费慢导致内存堆积
CDN边缘不能做HTML重写但能做轻量注入
多数CDN（如Cloudflare Workers、阿里云SCDN）禁止在边缘执行DOM操作，但允许在响应流中插入/删除字节块。这意味着你不能用document.querySelector改样式，但可以用正则或流式匹配做精准注入。
典型场景：往所有HTML响应头里加<meta name="viewport">，或在前注入埋点脚本。
- 用
transformStream配合TextEncoder/TextDecoder处理UTF-8流，避免乱码 - 匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
