秒杀页HTML体积必须压到30KB以内：禁用非必要meta、内联JS限1KB、CSS类名短命名、禁用template/slot、style属性标准化哈希去重、按钮DOM层硬控防抖、库存更新依赖服务端原子反馈、时间校准严格基于服务端时间戳。
秒杀页 HTML 体积必须压到 30KB 以内
真实高并发秒杀页面，HTML 要求不是“能用就行”，而是“必须轻、必须稳、必须可预测”。实测表明：当服务端吐出的 HTML 字符串超过 45KB，CDN 缓存命中率下降 22%，TTFB 延迟从 80ms 拉升至 210ms，且 SSR hydration 失败率翻倍。这不是理论值，是某电商大促期间凌晨三点回滚上线包时抓取的真实日志。
关键做法不是靠 gzip 事后压缩，而是源头控制：
- 禁用所有非必要 meta（如
<meta name="description">、<meta property="og:title">），只保留<meta charset="utf-8">和<meta name="viewport"> - 内联 JS 必须严格限制在 1KB 内，仅含倒计时校准逻辑和按钮锁态控制，其余全部 defer 加载
- 所有 class 名强制走短命名方案（如
btn-pri替代primary-button），CSS 类名映射表由构建时注入，不参与 SSR 渲染 - 禁止使用
<template>或<slot>等需客户端解析的结构，SSR 输出必须是扁平、闭合、无条件分支的 HTML 片段
style 属性必须在 SSR 阶段标准化并哈希去重
秒杀页常有大量商品卡片，每个都带 style="margin: 0; padding: 0.5rem; opacity: 1;" 这类内联样式。若不处理，1000 个卡片就多出 60KB+ 冗余文本——而且这些字符串无法被 gzip 高效压缩，因为每条略有差异。
不能等 HTML 渲染完再用正则扫一遍 style="[^"]*"，会误伤 <script>const s = '';</script>；也不能依赖客户端 JS 去重，hydration 前 HTML 已发出去了。
立即学习“前端免费学习笔记（深入）”；
正确路径是在 React/Vue 组件调用 useStyle 或类似工具时就做标准化：
- 合并连续空格，删末尾分号前空格 →
"margin:0;padding:.5rem;opacity:1;" - 单位小写化（
REM→rem），但保留px不转0px - 按字母序排列属性（
opacity在padding前），避免对象遍历顺序导致哈希不一致 - 用
xxHash32计算字符串哈希，Map 缓存"margin:0;opacity:1;padding:.5rem;" → "s12a"，渲染时输出style="s12a"并配全局 CSS 变量
按钮点击防抖 + 状态锁定必须 DOM 层硬控
用户看到“立即抢购”就猛点，前端若只靠后端限流或幂等，请求风暴会直接打穿网关。真实问题不是“要不要防”，而是“防不住——因为状态没锁死在 DOM 上”。
button.disabled = true 看似够用，但在 SSR 场景下，hydration 后 Vue/React 可能覆盖该属性；更糟的是，fetch 失败或超时后，disabled 一直卡住，用户以为页面坏了。
必须双保险：
- 点击瞬间同步设置
element.setAttribute('disabled', '')和element.style.pointerEvents = 'none'，绕过框架 state 更新时机 - 启动一个 8 秒 fallback 定时器：
setTimeout(() => { element.removeAttribute('disabled'); element.style.pointerEvents = ''; }, 8000) - 文字变更用
textContent直接写，不走框架响应式更新，避免 hydration 错位 - 不要监听
click，改用pointerdown，防止 touchstart/click 事件冲突导致重复触发
库存显示不能乐观更新，要走服务端原子反馈
前端自己减数字（“还剩 5 → 4”）看着流畅，但一旦网络中断、请求 504、或库存实际已售罄，UI 就彻底失真。用户看到“还剩 1”却抢不到，投诉率飙升——这不是体验问题，是信任崩塌。
真实方案是放弃“先扣后验”，改为“服务端确认后才变”：
- 按钮点击后只进入 loading 态，不改库存文案
- 接口返回成功且
data.stock > 0，才更新 DOM 中的textContent；若返回stock: 0或code: 2001（库存不足），立刻 render “已售罄”并禁用按钮 - 所有库存文案必须绑定到唯一 data-id，例如
<span data-stock-id="item-123">5</span>，避免因列表重排导致错位更新 - 禁止用
innerHTML插入带 HTML 的提示（如加粗“售罄”），只用纯文本 + class 控制样式，防止 XSS 注入点
最易被忽略的一点：所有时间校准、按钮锁态、库存文案更新，都不能依赖 Date.now() 或 performance.now() 做本地推算。服务端时间戳一旦下发，整个倒计时、库存刷新节奏、甚至按钮解锁倒计时，都必须基于它派生——哪怕本地时钟快 3 分钟，也要让页面“看起来慢”，而不是“看起来错”。
