高并发活动页HTML优化核心是3秒内完成首屏关键DOM构建与样式计算，须砍非首屏节点、禁用动态模板解析、以data-component锚定可替换模块；html-minifier需配置ignoreCustomFragments等参数避免白屏；骨架屏必须remove()销毁而非隐藏；统计脚本用async，业务脚本用defer，首屏图片禁用lazy并启用decoding="async"。
高并发活动页的HTML不能靠“压缩体积”来扛流量，核心是让浏览器在首屏3秒内完成关键DOM构建与样式计算——这意味着必须砍掉所有非首屏参与节点、禁用动态模板解析、用data-component锚定可替换模块，而不是堆砌minify工具。
为什么html-minifier直接跑大促页会白屏
大促页普遍混用服务端模板语法（如{{price}}）、动态埋点占位符（如<!-- GA:{{user_id}} -->）和条件渲染块（如{% if is_vip %}）。html-minifier默认按标准HTML解析器工作，遇到这些会被判定为非法标签或未闭合结构，轻则静默截断，重则抛Parse Error导致整个HTML字符串为空。
- 必须启用
ignoreCustomFragments，并显式传入正则：[/\{\{[^}]*\}\}/, /<!--[\s\S]*?-->/, /{%[\s\S]*?%}/] - 禁用
removeEmptyAttributes：大促页常依赖data-status=""或aria-hidden=""做状态控制，删掉即失联 -
collapseWhitespace要搭配conservativeCollapse: true，否则段落缩进、价格符号对齐（如¥ 199）全被抹平
data-component 是唯一安全的模块锚点
用class="banner"或id="promo-banner"定位模块，在AB测试、多版本并行、组件复用场景下极易失效：CSS覆盖类名、JS误删ID、同页面多次插入时ID重复。而data-component="promo-banner"不参与样式、不触发渲染、天然支持多实例，且能配合data-version="3.2"做CI校验。
- 所有模块根元素必须加
data-component，例如：<div data-component="countdown-timer" data-version="2.1"> - 禁止用
document.getElementById()查模块，改用document.querySelectorAll('[data-component="countdown-timer"]') - 服务端注入时，确保
data-component值与前端JS逻辑中initCountdown()函数的模块标识完全一致，大小写、连字符都不能差
骨架屏必须销毁，不能隐藏
大促页首屏强依赖骨架屏稳住LCP，但若用display: none或v-show隐藏骨架，它仍在DOM中参与布局计算、占用无障碍树、干扰IntersectionObserver判断，甚至导致内存泄漏——尤其在用户快速滚动、反复触发加载的场景下。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 骨架节点必须带
data-skeleton="true"标识，便于JS精准定位 - 真实内容加载完成，必须调用
skeletonEl.remove()彻底销毁，不是el.style.display = 'none' - 替换逻辑优先用
replaceChildren()而非innerHTML = '' + append()，减少layout thrashing - SSR返回的骨架HTML需与真实DOM严格同构：标签名、
class名、data-属性全等，否则hydration失败直接闪屏
静态资源加载策略必须按角色隔离
大促页JS只有两类：统计脚本（需尽早发请求）和业务交互逻辑（必须等DOM就绪）。混用async和defer会导致执行顺序失控，比如倒计时脚本在<div data-component="countdown-timer">还没生成时就运行，报Cannot read property 'dataset' of null。
- 统计脚本：
<script src="ga.js" async></script>（独立、无依赖、越早发请求越好） - 业务脚本：
<script src="countdown.js" defer></script>（必须等DOMContentLoaded） - 绝对禁止：
<script async defer>——Chrome和Safari行为不一致，线上已出现过半数用户倒计时不启动 - 首屏图片禁用
loading="lazy"，主视觉图必须用decoding="async"避免解码阻塞主线程
真正难的不是拆出多少个data-component，而是每个模块是否真的能独立销毁、独立 hydration、独立打点——如果一个“倒计时”模块里还藏着库存查询逻辑，那它就不是模块，只是又一层嵌套陷阱。
