提升网页加载速度：HTML解析与CSS优化技巧

网页加载速度慢的根源往往并非HTML文件过大，而是CSS和JS资源加载顺序不当导致浏览器渲染线程被强制阻塞：link标签默认同步加载CSS会暂停HTML解析直至CSSOM构建完成，同步脚本则直接中断DOM构建；通过合理使用media属性（如media="(min-width: 1024px)"）让非关键CSS异步加载、defer属性保障关键JS按序执行且不阻塞解析、精准preload首屏必需样式，并彻底弃用document.write，就能在零成本、高兼容的前提下显著缩短首屏时间——真正决定性能的，不是压缩了多少KB，而是是否理清并解开了浏览器内部的依赖锁链。

HTML解析被阻塞，八成不是因为HTML本身大，而是CSS和JS资源加载顺序不当触发了浏览器的渲染线程锁死。关键不在“怎么写得更短”，而在“让浏览器别卡在半路”。

为什么放在里会卡住DOM构建

浏览器遇到 时，会立即发起请求，并**暂停HTML解析器**，直到该CSS下载完成、解析出CSSOM，才继续构建DOM树——哪怕样式只用在页脚。这不是“慢”，是“强制等待”。

• 真实影响：一个未压缩的 180KB main.css 在 3G 网络下可能耗时 600ms，期间 标签都还没被解析到
• 常见误操作：把所有CSS合并成一个文件丢进 ，以为“减少请求数”就赢了，结果首屏白屏时间翻倍
• 兼容性注意：Firefox 会直接阻塞所有脚本；WebKit（Safari/Chrome）则按需阻塞——但只要JS里调用了 getComputedStyle() 或 offsetHeight，照样卡住

media 属性如何让非关键 CSS “不阻塞”

给 加上 media 属性（如 media="(min-width: 1024px)"），浏览器就会把它标记为“条件加载”，**异步获取、不参与阻塞链**，直到媒体查询匹配才应用。

• 适用场景：print.css、dark-theme.css、后台管理页专属样式等首屏无关的CSS
• 必须避开的坑：media="screen" 和不写 media 效果一样，都会阻塞；media="all" 同理
• 进阶技巧：对必须动态加载的模块CSS（如弹窗组件），可用 media="(min-width: 0px) and (max-width: 0px)" 占位，后续用JS切换为 "all"，但要注意避免FOUC

defer 脚本为何比 async 更适合业务主逻辑

async 脚本下载时不阻塞，但执行时机不可控——可能在 DOM 还没建完时就跑，也可能在 DOMContentLoaded 之后；而 defer 保证执行时机在 DOM 构建完成后、DOMContentLoaded 事件触发前，且严格按书写顺序执行。

• 典型错误：