html结构完整性检查必须放在第一步，因为浏览器解析是单向流式过程，缺失doctype、html根标签或head/body错位会导致解析降级为怪异模式，后续所有样式、脚本行为均失准。
HTML结构完整性检查为什么必须放在第一步
因为浏览器解析 HTML 是单向流式过程，一旦遇到缺失 、缺少 <code> 根标签或 / 错位，后续所有样式、脚本行为都可能失准——不是“渲染错”，而是“根本没按你预期的 DOM 树运行”。W3C 验证器报出的 “No doctype found” 或 “Element head is missing a required child element” 不是警告，是解析器已降级为怪异模式（Quirks Mode）的明确信号。
- 用
document.doctype在控制台直接查：返回null就说明缺失或写在了注释之后 -
中的lang属性漏写，会导致屏幕阅读器语种错乱，且部分 CSS 伪类（如:lang()）失效 -
<meta charset="UTF-8">必须出现在前 1024 字节内，否则早期字符可能被错误解码
语义化标签滥用比不用更危险
把 <div class="button"> 换成 <code><button></button> 看似只是改个标签，实际影响的是浏览器默认行为链：焦点管理、空格/回车触发、禁用状态样式、辅助技术角色识别。而用 <section></section> 包裹广告横幅、用 <article></article> 套导航菜单，反而会污染语义层级，让 document.querySelectorAll('article') 返回一堆无关节点，拖慢 JS 查询和 CSS 继承计算。
-
<nav></nav>应只用于主要导航区块；页脚链接列表用<footer></footer>即可，不必硬套<nav></nav> <table> 仅当数据具备行列关系时使用；纯布局场景用 <code>display: grid或display: flex，避免触发旧式表格布局算法- 检查
<h1></h1>～<h6></h6>是否跳级（如<h2></h2>后直接<h4></h4>），这会破坏大纲 API 和屏幕阅读器导航路径 - 用 Chrome DevTools 的
Computed面板对比两个元素的Matched CSS Rules数量，差异大就说明 class 复用不足 - 禁止在生产环境出现
style属性，除非是 JS 动态生成的不可预测值（如transform: translateX(${x}px)） - 删除未被任何 CSS 规则引用的 class，可用
purgecss或手动 grepclass="xxx"+ 查找.xxx是否存在于 CSS 文件中 - 首屏图片/视频必须省略
loading属性，或显式设为loading="eager" -
<link rel="stylesheet">不要加media值，除非你确定该样式只用于打印等特定场景 - 用
fetchpriority="high"标记 Logo、首屏背景图等核心视觉元素，让浏览器提前发起请求 -
<script></script>放在里且没加defer或async，会阻塞 CSSOM 构建，间接拖慢样式应用
内联样式与冗余 class 是样式性能隐形杀手
10 个按钮各自写 style="margin: 8px 12px; color: #333;"，浏览器要为每个节点单独解析、计算、缓存样式；而统一用 class="btn-small"，CSS 引擎能复用计算结果。更隐蔽的问题是 class 名重复堆叠：class="card card--shadow card--rounded card--primary" 表面是 BEM，实则让选择器匹配链变长，且增加 HTML 体积。
资源加载属性配置不当会直接卡住首屏渲染
loading="lazy" 不是万能开关。给首屏轮播图加它，浏览器会跳过预加载，导致 LCP（最大内容绘制）延迟；给关键 CSS 的 <link rel="stylesheet"> 加 media="print" 却忘了切回 media="all"，样式表压根不生效——这些都不是 JS 错误，但用户看到的就是白屏或错位。
<div> 模拟 <code><button></button> 时顺手删掉了 type="button"，导致表单意外提交；又比如把 <img> 宽高留空，靠 JS 动态设置，结果 SSR 渲染时触发重排。这些点不报错，但会在放大流量后集中爆发。
