真正有效的HTML压缩必须配合服务端Gzip，仅删空格注释无效；需配置gzip_types包含text/html并验证Content-Encoding: gzip响应头，否则前端压缩无传输收益。
HTML代码压缩到什么程度才算有效
纯删空格注释只是入门，真正有效的HTML压缩必须配合服务端Gzip才起作用。不启用gzip on，前端压缩再狠也白搭——因为浏览器收到的还是未压缩的原始字节流。
实操建议：
- 先用
html-minifier移除注释、折叠空白、简化布尔属性（如disabled代替disabled="disabled"） - 确保
gzip_types里包含text/html，否则Nginx根本不会对HTML做压缩 - 检查响应头是否有
Content-Encoding: gzip，没这个就说明配置没生效 - 避免过度压缩：比如把
<div class="btn">硬缩成<d c="b">，会破坏CSS选择器匹配，反而引发渲染错误
秒杀页HTML里哪些结构最容易被压缩误伤
语义化标签和动态属性是高压区。压缩工具若无上下文感知，会把<template>、<slot>、v-if或{{item.name}}这类占位符当冗余内容删掉，导致Vue/React hydration失败或模板丢失。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
-
<!--#include file="header.html"-->这类SSI指令，压缩后可能被当作普通注释清除，导致服务端包含失效 -
data-*属性名被缩写（如data-product-id→data-pid），但JS里仍按原名读取，造成逻辑断裂 -
<script type="application/json">里的JSON字符串，若压缩器尝试“优化”引号或换行，直接让JSON.parse()报错 - 内联
style标签里的CSS，如果压缩器错误合并了!important声明顺序，可能覆盖关键样式
按钮禁用 + 倒计时 + 库存更新，三者如何在HTML层协同防错
不是写三个独立逻辑，而是用同一套状态驱动DOM。所有交互反馈必须基于服务端时间戳和原子操作，不能靠本地变量拼凑。
关键约束：
- 倒计时用
setInterval每秒重算，每次调用getServerTime()（基于server_time - Date.now()偏移量），不用setTimeout递归 - 按钮
disabled状态必须和isSubmitting布尔值绑定，且在fetch().finally()里恢复，不能只等then - 库存显示字段必须带
data-stock属性，点击后先乐观更新el.textContent = parseInt(el.dataset.stock) - 1，再发请求；失败则回退并提示“库存已抢光” - 所有事件监听器加
once修饰符，防止重复绑定（尤其SPA中组件反复挂载时）
为什么秒杀页的HTML必须拒绝CDN缓存静态副本
CDN缓存的是HTML文件本身，但秒杀页的核心状态（倒计时起点、剩余库存、用户资格）全靠服务端实时注入。缓存一份10分钟前的HTML，等于把过期状态广播给所有用户。
必须做的配置：
- Nginx里对秒杀路径加
add_header Cache-Control "no-cache, no-store, must-revalidate"; - 禁止CDN对
/seckill/*路径做缓存，哪怕只缓存1秒也不行 - HTML里用
<meta http-equiv="Cache-Control" content="no-cache">是无效的，浏览器根本不理，得靠响应头 - 如果用了SSR，确保每个请求都走真实后端，而不是从CDN吐出预渲染快照
最易被忽略的点：开发时本地测试一切正常，上线后CDN自动缓存index.html，结果所有用户看到的都是同一份初始库存和倒计时——这种问题只有压测或真实流量进来才会暴露。
