<p>HTML注释不影响运行时性能但增大传输体积，应统一用<!-- PERF: -->标注人工权衡的性能决策点，并在构建时自动剥离。</p>
HTML 注释本身不影响性能，但滥用会增大传输体积
HTML 注释（<!-- ... -->）在浏览器解析时被完全忽略，不参与 DOM 构建、渲染或执行，所以不会拖慢页面运行时性能。但它会增加 HTML 文件体积，尤其在开发阶段留下的大量调试注释、TODO 或冗长说明，会提升首字节时间（TTFB）和网络传输开销——这对移动端或弱网用户有实际影响。
性能提示类注释的真正价值不在“运行时优化”，而在协作可维护性：帮团队快速识别关键渲染路径、资源加载瓶颈或潜在重构点。写得不好反而干扰阅读，甚至误导后续开发者。
用 <!-- PERF: ... --> 统一前缀，避免模糊描述
直接写 <!-- 优化这里 --> 没有意义。必须明确标注：什么指标、在哪一环、为什么重要。推荐固定前缀 <!-- PERF:，便于 grep / IDE 全局检索，也区别于普通功能注释。
<!-- PERF: Critical CSS inlined to avoid render-blocking --><!-- PERF: This <img> lacks `loading="lazy"` — defers offscreen assets --><!-- PERF: Script loaded with `defer` to prevent parser blocking -->
不推荐：<!-- 这里要优化 -->、<!-- TODO: 性能 -->、<!-- ⚡️ -->（符号不可搜索，语义不清）。
立即学习“前端免费学习笔记（深入）”；
只在 HTML 源码中标注“不可自动检测”的性能决策点
工具（Lighthouse、WebPageTest）能发现的常见问题（如未压缩图片、缺失 alt、无 defer）不需要手写注释。HTML 注释应聚焦于人工权衡后的设计选择，尤其是那些牺牲可读性/简洁性来换取性能收益的地方：
- 内联关键 CSS 的范围边界（
<!-- PERF: Inlined above-the-fold styles only — rest deferred via CSSOM injection -->） - 主动拆分
<script>并用type="module"+nomodule降级（<!-- PERF: Module/non-module split avoids transpilation bloat for modern browsers -->） - 对某个
<iframe>显式设置sandbox和referrerpolicy以减少预加载干扰（<!-- PERF: Sandbox restricts preloads, cuts ~120ms TTI on this embed -->）
这类注释本质是“性能契约”——告诉后来者：“改这里可能回归性能，需同步验证 Core Web Vitals。”
构建时自动剥离注释，别让它们进生产环境
开发阶段保留性能注释很有用，但上线后它们只是白占带宽。必须确保构建流程（如 Webpack、Vite、Hugo、Jekyll）在 production 模式下移除所有 HTML 注释。
例如 Vite 用户可在 vite.config.ts 中启用：
export default defineConfig({
build: {
rollupOptions: {
plugins: [
html({ minify: true }) // 内置 html-minifier-terser，默认删注释
]
}
}
})Webpack + html-webpack-plugin 则需显式配置 minify: { removeComments: true }。没配？那你的 <!-- PERF: ... --> 正躺在用户手机缓存里浪费流量。
最易被忽略的一点：有些团队用 SSR 框架（如 Next.js、Nuxt）生成 HTML，却忘了服务端模板引擎（如 EJS、Pug）默认保留注释。务必查清模板层是否已清理。
