HTML性能问题源于语义误用、结构冗余与渲染失控：12层div缺ARIA、table-layout:auto致重排卡顿、语义标签缺失影响可访问性与渲染优先级、虚拟滚动需节点裁剪而非仅overflow、CI必须集成a11y校验。
大型项目里，HTML 标签本身不直接“慢”，但语义误用、结构冗余、渲染模式失控会引发主线程卡顿、可访问性断裂、维护成本飙升——性能问题往往在第 3 次迭代后才爆发，不是因为写了 div，而是因为写了 12 层嵌套的 div 却没加 role 或 aria-labelledby。
table-layout: fixed 必须显式声明，否则等于没开
500 行 × 20 列表格在 table-layout: auto 下，浏览器要逐行扫描所有 td 内容（含未截断文本、内联样式、未设宽图片）来推算列宽，单次重排可能耗时 200ms+。这不是 JS 慢，是浏览器渲染管线被堵死。
-
table元素上必须写style="table-layout: fixed"，不能靠 reset.css 或父级继承 - 用
col标签预设宽度：<col style="width: 150px"> <col style="width: auto">，td上的width属性会被忽略 - 响应式列宽改用
@media控制col的width，别在单元格里塞min-width - 没
thead/tbody，浏览器无法对表头做合成层提升，滚动时整表重绘；没scope或headers，屏幕阅读器强制全表遍历关联行列
语义标签不是“锦上添花”，而是 DOM 构建阶段的性能契约
用 div 堆出导航栏，JS 查找 nav 要遍历整个 DOM；用 section 替代无意义 div，辅助技术能跳过非关键区块；用 main 标记主体，部分浏览器会提前为该区域分配渲染优先级。
-
header/footer不一定只出现一次，但每个article可自带独立header；section必须有明确主题，不能只为加 margin 而存在 -
h1～h6跳跃使用（如h1后接h4）会破坏辅助技术的层级跳转逻辑，也影响 SEO 权重传递 - 所有交互元素（
button、a、带tabindex的div）必须有明确role和焦点管理，否则键盘用户无法操作 - 团队规范里要明文禁止 “
div+ class=‘card’” 这类写法，强制要求：有语义就用语义标签，没语义就加role="region"并配aria-label
虚拟滚动不是加个 overflow: auto 就完事
容器设了 overflow-y: auto 但 DOM 节点全在内存里，浏览器照常解析、布局、绘制——200 行表格照样卡。虚拟滚动的核心是“只挂载可视区 ±1 屏的节点”，不是“让滚动变顺”。
立即学习“前端免费学习笔记（深入）”；
- 必须预设每行高度（或缓存动态高度），否则无法精确计算占位
height和滚动偏移 - 禁用
will-change: transform在滚动容器上：现代浏览器对表格内部元素触发该声明，反而强制图层提升、吃内存 - 后端返回原始数组时，前端别
.map()全量渲染；按offset+pageSize切片，喂给virtuoso或react-window - 手写
scroll监听 +innerHTML替换 = 白忙活，这些库已处理IntersectionObserver回退、键盘导航、焦点保持
最难把控的从来不是技术方案，而是当 PR 里混进一个没 alt 的 img、一个裸 div 当按钮、一个没 scope 的表格时，CI 流水线是否真能拦住它——规范文档写得再细，不如一条 eslint-plugin-jsx-a11y 规则和一个 html-validate 钩子来得实在。
