HTML结构精简不是删标签，而是砍掉语义冗余和DOM层级浪费；高性能样式设计不靠CSS压缩，而在于避免重排重绘、控制选择器开销、合理使用will-change和transform触发GPU加速。
直接说结论：HTML结构精简不是删标签，而是砍掉语义冗余和DOM层级浪费；高性能样式设计不靠CSS压缩，而在于避免重排重绘、控制选择器开销、合理使用will-change和transform触发GPU加速。
怎么判断HTML结构是否真“轻”？看三个硬指标
很多人以为删掉空格、注释就是精简，其实关键在运行时表现：
- 用浏览器开发者工具的Elements面板检查
body下直接子节点数量——超过8个（如一堆div套div）就该警惕 - 打开Performance面板录制一次页面加载，关注
Layout事件耗时——若单次超过16ms（即一帧），说明结构导致频繁重排 - 检查是否有无意义的包裹层，比如：
<div class="wrapper"><div class="inner"><p>文本</p></div></div>，这种嵌套在语义和样式上都无必要
CSS选择器性能陷阱：别让.class .child:nth-child(2n)拖垮渲染
选择器越具体，浏览器匹配越慢。尤其在动态插入元素或频繁操作DOM时，低效选择器会放大性能问题：
-
.nav ul li a比.nav-link慢3–5倍（实测Chrome DevTools profiling数据） - 避免使用
:nth-child、:not()等伪类做高频样式控制，它们强制浏览器遍历整个父容器 - 优先用类名直选：
.btn-primary，而非button.btn——标签名+类名组合会让引擎多走一步类型判断 - 不要在关键路径上用
[data-xxx]属性选择器，它无法被CSSOM高效索引
哪些CSS声明会偷偷触发重排？
重排（reflow）是性能杀手，但很多写法看起来“很普通”，实际代价极高：
立即学习“前端免费学习笔记（深入）”；
-
width、height、top、left、margin、padding—— 修改任一都会导致浏览器重新计算布局 -
font-size、line-height、visibility: hidden（注意：不是display: none）也会触发重排 - 安全替代方案：
transform: translateX(10px)代替left: 10px；opacity: 0代替visibility: hidden；transform: scale(1.2)代替font-size缩放 - 如果必须动画尺寸变化，用
will-change: transform提前告知浏览器——但只加在真正需要动画的元素上，滥用反而降低性能
真正难的不是写出“轻”的代码，而是识别哪些精简会破坏可维护性或无障碍支持。比如删掉alt属性确实减小了HTML体积，但代价是屏幕阅读器失效；用div替代header看似少打几个字，却让SEO和语义解析器失去线索。轻量，永远是在约束条件之间做取舍，而不是单纯做减法。
