html规范化书写本身不直接减少重绘，但能显著降低意外重排触发概率，并让浏览器更高效地复用样式计算与渲染层；关键影响点在于doctype缺失或错误会触发怪异模式，导致flex、100vh等行为异常并放大重排范围，lang缺失引发字体回退失效和内容尺寸抖动，未闭合标签造成dom修正与渲染层分裂，语义化标签（如）隐式增强contain边界，而dom深度超6层会使transform失效、被迫分块光栅化。
HTML规范化书写本身不直接减少重绘，但能显著降低意外重排触发概率，并让浏览器更高效地复用样式计算与渲染层——关键影响点不在“写得漂亮”，而在“让浏览器少猜、少回溯、少重建”。
为什么DOCTYPE和lang会影响重排频率
缺失DOCTYPE或错误声明会触发怪异模式（Quirks Mode），此时浏览器对flex、100vh、getBoundingClientRect()等行为的处理逻辑完全不同，常导致布局计算反复失败后降级重试，间接放大重排范围。同理，lang缺失会使某些字体回退策略失效，文本换行位置不稳定，进而引发内容尺寸抖动，触发连锁重排。
必须全小写、无空格、位于首行（前1024字节内）-
中的值要严格匹配BCP 47标准，不能写成zh或cn - 旧版IE/Safari对
meta charset位置敏感：必须放在开头1024字节内，否则可能误判编码，导致DOM解析中断后重建
<img>和<input>不闭合会怎样
未闭合的自闭合标签（如<img src="a.jpg">）在解析时会被浏览器自动修正，但这个修正过程可能打断DOM树连续性。实测中，当<img>后紧跟<div>且未闭合时，Chrome会把<code><div>提升到<code><img>父级外层，导致原本应共属同一渲染层的节点被物理分离——合成器被迫切成两个tile，各自光栅化，增加GPU内存带宽压力。
- 必须写
<img src="a.jpg" alt="">，即使alt为空也不能省略 -
<input type="text">同样需闭合，XML风格/>非必需，但显式闭合更稳妥 - 所有属性值统一用双引号，
class="header"比class='header'或class=header更可靠
语义化标签如何截断重排传播链
用<header></header>、<main></main>、<nav></nav>替代<div class="header">，不只是为了SEO。浏览器对语义容器有隐式<code>contain: layout paint style倾向，尤其在现代渲染引擎中，<main></main>内部的DOM变动更难向上穿透影响层级的布局计算。
-
<main></main>在整个文档中只能出现一次，多次使用会破坏渲染边界识别 -
<nav></nav>应包裹导航链接集合，而非单个<a></a>；混用<div>包裹会削弱浏览器对其渲染上下文的判断 <li>避免<code><p></p>内嵌<div>——非法嵌套会触发自动修复，把<code><div>提到<code><p></p>外，造成祖先链断裂，分块失效DOM深度超6层为何让
transform失效当DOM深度≥7（例如
<div><div><div><div><div><div><p>文本</p></div></div></div></div></div></div>），浏览器合成器无法将视觉连贯区域映射为单一渲染层。即使给最内层<p></p>加了transform: translateX(10px)，它仍可能因分块切割而失去硬件加速，反而走主渲染线程触发重排。- 用DevTools → Layers面板检查：若目标区域被切成多个窄高矩形块，就是深度问题
- 右键节点 → Show DOM properties → 查
depth值，≥7必须重构 - 优先用
<section></section>、<article></article>替代中间层<div>，它们自带更清晰的布局上下文 <li> <code>display: contents可“压平”结构，但Safari 15.4+才支持，且可能让父级丢失分块锚点
真正卡顿往往不出现在
transform写错的地方，而出现在<div>嵌套过深却没被注意到的角落——浏览器不会报错，只会默默多切几个<code>tile，然后你发现动画掉帧，却查不到JS瓶颈。
