HTML应让关键内容尽早出现、减少阻塞：首屏标签（如<main>）靠近<body>开头；删减冗余DOM节点；关键CSS内联（≤15KB），非首屏外链；JS按需用defer（业务逻辑）或async（无依赖脚本）；index.html禁用CDN缓存，强制no-cache。
HTML结构怎么写才不拖慢解析
浏览器解析HTML是自上而下流式进行的，遇到阻塞型资源就停住——所以结构顺序直接决定首屏时间。关键不是“多语义化”，而是“让关键内容早出现、少干扰”。
常见错误现象：div套div再包一层div，首屏按钮被埋在第7层嵌套里；<script src="vendor.js"></script>写在<head>顶部，整个DOM构建卡住；<link rel="stylesheet">放在<body>底部，导致FOUC或重绘抖动。
-
<main>、<article>等承载首屏内容的标签尽量靠近<body>开头，避免前置大量导航、广告、埋点脚本 - 删掉所有
display: none但仍在DOM里的冗余节点——它们不参与渲染树，但会占用DOM解析和内存，尤其在列表页、搜索页中易堆积 - 慎用
<table>布局：表格单元格需整行解析完才能开始渲染，比flex或grid多一次重排成本
关键CSS内联还是外链？怎么选
内联关键CSS能跳过HTTP请求，但滥用会导致HTML体积膨胀、缓存失效；外链利于复用和缓存，但首次加载可能阻塞渲染。选择取决于资源稳定性和页面粒度。
使用场景差异明显：/index.html是动态入口，/static/app.8f3e2d.css是带哈希的静态产物，二者必须分开处理。
立即学习“前端免费学习笔记（深入）”；
- 首屏必需样式（如标题字号、按钮背景、布局容器）建议内联到
<head>中，控制在~15KB以内 - 非首屏样式、主题色变量、深色模式规则等，全部外链，配合
Cache-Control: public, immutable, max-age=31536000 - 绝对不要用
<meta http-equiv="Cache-Control" content="">——Chrome/Firefox/Edge全忽略，纯伪配置
script加defer还是async？区别在哪
defer和async都用于解除JS对HTML解析的阻塞，但执行时机和依赖关系完全不同。选错会导致DOM未就绪就执行、事件监听丢失、或模块加载错乱。
典型坑：async脚本在下载完立刻执行，可能早于<body>解析完成；defer保证按声明顺序、在DOM解析完毕后执行，更适合有DOM操作的逻辑。
- 第三方统计、埋点、广告脚本用
async，彼此无依赖且不操作DOM - 业务主逻辑、组件初始化、表单校验等用
defer，尤其在SSR场景下更稳妥 - 内联小脚本（如设置
document.documentElement类名）可不加属性，但必须放在<body>开头，确保DOM节点存在
为什么CDN缓存HTML反而更慢
CDN缓存HTML不是加速手段，而是发布风险放大器。它把“服务端控制权”让渡给边缘节点，一旦配置偏差，问题会批量爆发且难回滚。
典型坑：Cache-Control: no-cache已正确返回，但CDN后台对/路径设置了“默认缓存60秒”，结果用户看到的是2小时前的首页按钮。
-
index.html应返回Cache-Control: no-cache或max-age=0, must-revalidate，强制每次验证 - CDN后台必须设为“遵循源站响应头”，否则它可能按默认策略覆盖你的真实意图
- 检查是否生效：打开DevTools → Network → 点击
index.html请求 → 查看Response Headers里Cache-Control值，并留意x-cache(Cloudflare)或x-cdn-cache(阿里云)是否显示HIT或MISS
真正影响首屏速度的，往往不是某一行CSS写法，而是HTML结构里一个没删掉的display: none广告位、CDN后台一个被忽略的默认缓存策略、或者defer被误写成async后引发的DOM读取失败——这些点不显眼，但一出问题就是大面积白屏或错版。
