HTML与Node.js模板编译缓存优化的大型工程实践-html教程-PHP中文网

生产环境必须开启编译缓存，否则每次请求重编译将导致cpu浪费20–50ms、qps下降30%+；marko需显式配置compileroptions.cache=true且避免webpack干扰，thymeleaf仅spring.thymeleaf.cache=true不够，须配合concurrentcachemanager及checkexistence(true)确保缓存生效。

html与node.js模板编译缓存优化的大型工程实践

Marko/Thymeleaf模板编译缓存为什么不能关

模板引擎在首次加载时会把 .marko 或 .html 文件解析成 JS 函数，这个过程叫“编译”。如果每次请求都重新编译，CPU 会白耗 20–50ms，QPS 直接掉 30%+。生产环境必须开启编译缓存，但不是简单设个 cache: true 就完事。

常见错误现象：Marko 在开发模式下默认禁用编译缓存，上线后忘记配 compilerOptions.cache；Thymeleaf 的 spring.thymeleaf.cache=true 虽默认开启，但若使用 ClassLoaderTemplateResolver 且未设置 cacheManager，实际仍不生效。

Marko：必须显式传入 compilerOptions: { cache: true }，且确保 require 不被 Webpack 打包干扰（避免 eval 模式）
Thymeleaf：仅靠 spring.thymeleaf.cache=true 不够，需配合 ConcurrentCacheManager 实例，否则缓存键冲突导致函数复用失败
缓存 key 必须包含文件内容哈希，否则文件更新后旧编译结果仍在内存里——Marko 默认做，Thymeleaf 需手动配置 templateResolver.setCheckExistence(true)

HTML模板碎片缓存与主页面生命周期怎么对齐

服务端模板碎片（比如 header.marko、comment-section.html）没有独立 URL，不能靠 CDN 或浏览器缓存控制；它的缓存行为必须和主页面一致，否则出现“标题新、导航旧”这种错位。

常见错误现象：Nginx 对 /fragments/*.html 设置了 max-age=3600，但主页面是 no-cache，用户刷新后看到新内容混搭旧碎片；或 HTMX 请求返回的碎片没设响应头，被浏览器误当主页面缓存。

HTMX 场景下，碎片响应必须显式写 res.set('Cache-Control', 'no-cache')（Express）或 response['Cache-Control'] = 'no-cache'（Django），不能依赖中间件全局配置
完全静态碎片（如页脚）可由 Nginx 单独缓存，但前提是它不读取 request、user 等上下文变量，否则 key 缺失维度
Webpack 预生成碎片 HTML 时，filename: '[name].[contenthash].html' 必须生效，否则 readFileSync 加载的是旧文件

Node.js内存缓存模板渲染结果的风险点

直接缓存整个渲染后的 HTML 字符串到 Map 或 lru-cache，看似省事，实则埋雷。模板输出不是纯静态数据，它可能含用户态变量、CSRF token、实时时间戳等，缓存一发就错。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

常见错误现象：cache.set('home-page', html) 后，不同用户访问首页看到同一份 HTML，其中 ${user.name} 全是第一个用户的昵称；或缓存了带内联 <script></script> 的片段，客户端 hydration 时执行两次初始化逻辑。

缓存前必须剥离动态内容：把 ${user.name} 提成 placeholder，渲染后再注入，缓存只存骨架 HTML
绝对禁止缓存含 <script></script>、<style></style> 标签的片段——SSR 输出的 script 会在客户端重复执行，且无法随状态更新
key 必须携带所有可变维度：URL 查询参数、用户 ID、语言、设备类型（isMobile），漏一个就导致缓存污染