模板缓存必须做，但只缓存解析/编译结果（如ast或编译函数），不缓存执行结果；流式渲染需按区块独立缓存且带locale/device标识；html压缩须保护模板语法；缓存前须剔除data-hydrate属性。
模板缓存该不该做？关键看阶段
必须做，但只缓存解析/编译结果，不缓存执行结果。很多团队把 template.render(data) 的完整 HTML 存进 Redis，导致用户昵称、实时时间等动态内容被固化，下次请求直接返回旧页面。
真正该缓存的是：template.parse() 后的 AST（如 Go 的 *template.Template 实例），或编译函数（如 EJS 的 template.compile() 返回值）。这部分不依赖运行时数据，启动时加载一次即可复用。
- Node.js 中若用
fs.readFileSync+handlebars.compile()放在每次请求里，高并发下 CPU 会打满 - Express + EJS 默认开启
cache: true，但需确认没被显式设为false - Go 的
html/template不自动缓存，必须手动调用template.New().ParseFS()后复用同一实例
流式渲染时缓存怎么分片？不能拼接 chunk
AsyncStream 类引擎（如 Marko）支持按区块缓存，但缓存键必须带 stream 分段标识，比如 "header:en"、"footer:zh"；且一旦 res.write() 发出第一个 chunk，后续 chunk 就不能再从缓存读取后拼接——HTTP 流不可逆。
错误做法：cache.get('page') + cache.get('comments') → 可能破坏顺序、触发 double-write 或 hydration 错乱。
- 每个 stream segment 必须独立缓存，由引擎自身控制 write 时机
- 缓存 key 应包含 locale 和 device type，但默认排除 session ID，防止缓存污染
- 若用
packages/runtime-class/src/runtime/html/AsyncStream.js，注意它内部已做函数级缓存，无需额外 wrapper
HTML 压缩时模板语法被删怎么办？
上线前用 html-minifier 压缩是常规操作，但若未正确配置 ignoreCustomFragments，{{user.name}}、{% if %} 这类语法会被删掉或转义，导致服务端渲染白屏或报错 ReferenceError: user is not defined。
- EJS 项目：确保
ignoreCustomFragments包含/{{[\s\S]*?}}/ - Handlebars 项目：加
/{{[\s\S]*?}}/和/{%[\s\S]*?%}/ - Go 的
html/template本身不走第三方 minifier，若硬要用外部工具，必须保护{{.Name}}类语法 - 验证方法：压缩后打开源码，搜索
{{和{%，确认它们原样保留
hydration 失效的隐藏原因：缓存里混了 data-hydrate 属性
当只对部分组件做 hydration（如仅激活搜索框和登录按钮），缓存 HTML 时若没处理 data-hydrate 属性，客户端 JS 会尝试 hydrate 一个早已绑定过事件的 DOM，引发重复绑定、状态错乱或点击两次才响应。
典型表现不是报错，而是交互行为异常：表单提交后清空、按钮点击延迟、光标丢失。
- 缓存前必须剔除所有含
data-hydrate的节点，或确保这些属性值已被剥离 - 若用 art-template，block 继承层级超过三层（layout → inner → feature → detail）会导致编译缓存命中率骤降，间接加剧 hydration 不一致风险
- 非首屏内容别用
display: none，改用<template></template>+IntersectionObserver按需加载，避免 DOM 构建拖慢首屏解析
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
