bootstrap.min.css会阻塞首屏渲染，因为它被浏览器视为关键渲染资源，需下载、解析并构建cssom后才继续html解析和布局，而其中大量未使用的组件样式、媒体查询、字体图标等冗余规则加剧了阻塞。
为什么 bootstrap.min.css 会阻塞首屏渲染
因为浏览器把 bootstrap.min.css 当作「关键渲染资源」，遇到 <link rel="stylesheet"> 就暂停 HTML 解析和布局，直到它下载、解析、构建完 CSSOM 才继续——哪怕你只用了 .btn 和 .container，也得等那 200KB+ 的全量样式全部处理完。
哪些内容实际参与了首屏阻塞
真正拖慢首屏的不是 Bootstrap 这个名字，而是你引入的那份 CSS 是否包含首屏不需要的规则：
-
carousel、tooltip、offcanvas等组件样式，只要没在首屏出现，就纯属冗余负担 - 所有未被使用的媒体查询（比如
@media (min-width: 1200px)下的栅格偏移规则）仍会被下载并解析 - Bootstrap 默认启用的字体图标（
@font-face）、SVG sprite 引用、背景图 URL，都会触发额外请求或延迟 CSSOM 完成 - 如果用了
@import或嵌套url()，还会引发串行加载，进一步拉长关键路径
常见错误写法加剧阻塞
这些操作看似“稳妥”，实则让阻塞更严重：
- 在
main.scss里写@import "bootstrap/scss/bootstrap"—— 直接回归全量编译 - HTML 中同时引入 CDN 版
bootstrap.min.css和本地打包版 —— 浏览器多下一次 200KB - 把
<link>移到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
