能，但效果有限——真正影响重排的是样式计算和布局触发条件，不是嵌套层数本身；深层嵌套会间接放大重排成本，因dom节点增多、样式规则复杂化，导致浏览器计算每个节点位置耗时增加。
HTML结构扁平化能减少重排吗
能，但效果有限——真正影响重排的是样式计算和布局触发条件，不是嵌套层数本身。不过深层嵌套会间接放大重排成本：DOM节点越多、样式规则越复杂，浏览器计算每个节点位置所需时间就越长。
常见错误现象：div套div再套div，实际只需一个section或article就能表达语义；用span包裹button做样式隔离，反而增加无效节点。
- 优先用语义化标签替代无意义容器：
header、nav、main、aside等天然具备语义且通常无需额外样式重置 - 避免“divitis”：检查每个
div是否承担了明确职责（布局、作用域隔离、JS钩子），否则直接删掉 - 对列表类结构，用
ul/ol+li，别用div模拟，否则会丢失可访问性信息和默认样式继承链
内联CSS真的能跳过CSSOM构建吗
不能跳过，但能绕过外部资源加载阻塞。浏览器仍需解析内联style标签内容并构建CSSOM树，只是这个过程和HTML解析同步进行，不触发网络等待。
使用场景：首屏关键样式（如标题字体、按钮颜色、布局栅格）必须在中内联；非关键样式（如动画、主题切换、打印样式）一律外链。
- 内联体积建议控制在 2–3KB 以内，超过后压缩收益下降，且不利于缓存复用
- 不要内联完整CSS文件——工具如
critters或mini-css-extract-plugin的critical模式可自动提取首屏CSS - 注意
@import在内联style中仍会阻塞，禁止使用
html-minifier压缩动态模板时为什么报错
因为默认配置会误删模板语法，比如{{name}}被当成冗余空格或注释干掉，导致服务端渲染失败或前端模板引擎报ReferenceError。
参数差异：静态HTML压缩开箱即用，动态模板必须显式声明保护规则。
- 用
ignoreCustomFragments匹配模板语法，例如 Handlebars：/{{[\s\S]*?}}/，EJS：// - 若项目混用多种模板（如EJS + Vue单文件组件），需把所有片段正则都列进该数组
-
removeComments: true要慎用——很多模板依赖<!-- if: user.isAdmin -->这类条件注释，删掉就逻辑失效
script标签放body底部还阻塞渲染吗
放底部时，HTML解析已完成，不会阻塞DOM构建，但依然可能阻塞渲染树生成和绘制——只要脚本里有同步操作DOM或读取offsetHeight等布局信息，就会强制触发重排。
性能影响：即使没阻塞HTML解析，执行耗时脚本仍会让主线程忙于JS计算，延迟页面视觉呈现。
- 优先用
defer：保证执行顺序，且不阻塞解析，适合依赖DOM的初始化脚本 - 对纯功能型脚本（如埋点、广告SDK），用
async更合适，但注意执行时机不可控 - 避免在
DOMContentLoaded回调里批量读写clientWidth、getComputedStyle——这些是强制同步布局的“雷区”
最容易被忽略的是：HTML质量优化不是“压缩完就完事”，而是要和CSSOM构建、JS执行时机、资源加载优先级联动判断。比如删掉一个div节省了几个字节，但如果它让某个position: absolute元素脱离文档流而减少重排范围，那才是真实收益。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
