display: grid，完全不需要加三个的多层结构。
语义化标签：不是更时髦，而是让浏览器真正理解内容
搜索引擎、辅助设备，甚至现代CSS引擎，都依赖语义标签来做结构推断。错用或混用语义标签，会直接导致SEO排名下降、屏幕阅读器读错内容、首屏渲染延迟。这不是纸上谈兵，而是真实项目中反复出现的问题。
则不满足这个条件，别硬套。
。
- 标题层级必须严格递进：
DOM层级超过4层就开始拖慢渲染
浏览器构建DOM树时采用深度优先遍历，每深一层，解析时间、CSS匹配成本和内存占用就会同步上升。这不是理论值，而是在Chrome DevTools的Elements面板里能直接定位到的瓶颈点。
几个实操建议：
- 用Chrome DevTools的Elements面板，按
Ctrl+Shift+C，重点检查套的区域。
- 动态列表插入时务必使用
DocumentFragment进行批量操作，避免每添加一项都触发一次DOM重排。
- 单个容器的子元素建议控制在50个以内，超过了就考虑分页、虚拟滚动或懒加载。
- 不要为了“兼容旧IE”而保留深层嵌套。现代项目中，IE已经没有实际支持的必要，强行降级反而会牺牲性能。
HTML压缩的实操边界在哪
删除空格和换行确实能减小体积，但过度压缩可能破坏解析，特别是属性值里包含空格或特殊字符时。真正该清理的是无用注释、空的class=""、测试用的，而不是引号或换行本身。
- 推荐使用
html-minifier-terser，配置removeComments: true和collapseWhitespace: true，但务必禁用removeAttributeQuotes。
- 内联关键CSS时，必须剔除所有非首屏的规则（比如
.modal-hidden、#footer），否则内联优化等于白费功夫。
- 内联内容的体积不能超过约14KB（TCP初始拥塞窗口的限制），超了会导致多一个往返延迟（RTT）。
- 如果用了
media查询（比如