用 Tailwind 更优，因其支持 PurgeCSS 精准剔除未用样式；Bootstrap 需手动引入 SCSS 子模块或第三方插件压缩；Bulma/Foundation 因嵌套选择器、无 ESM、不可按需提取而拖慢首屏；CSS-in-JS 有运行时开销，应慎用于高频交互场景。
用 Tailwind 还是 Bootstrap？先看你的构建流程是否支持 PurgeCSS
框架本身不慢，慢的是没删掉的无用 CSS。Tailwind 默认生成大量工具类，Bootstrap 的 bootstrap.css 里也包含所有组件样式——哪怕你只用了 btn 和 card。关键不在“用不用框架”，而在“能不能精准提取实际用到的样式”。
如果你项目用 Webpack/Vite + PostCSS，tailwindcss 的 content 配置配合 purge（v3+ 改为 content）能干掉 90% 以上未使用的类；而 Bootstrap 官方不内置 tree-shaking，得靠 bootstrap/scss 手动 import 子模块，或引入第三方插件如 autoprefixer + cssnano 做声明级压缩。
- 用 Tailwind：确保
tailwind.config.js中content字段覆盖所有模板路径，例如["./src/**/*.{html,js,jsx,ts,tsx}"] - 用 Bootstrap：别直接引入
dist/css/bootstrap.min.css，改用 SCSS 源码 +@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/buttons"; - 两者都建议开启 CSS 压缩和 Gzip/Brotli，否则 Purge 后的体积优势会被抵消
为什么用 Bulma 或 Foundation 会悄悄拖慢首屏？
这类框架依赖大量嵌套选择器和 @import 链式加载，导致 CSS 解析时间上升、FOUC（Flash of Unstyled Content）概率增加。Bulma 的 .button.is-primary.is-large 类名组合在浏览器中需多次匹配，比单层类名（如 Tailwind 的 bg-blue-500 text-white py-2 px-4）更耗解析资源。
更隐蔽的问题是：它们通常不提供 ESM 版本，无法被现代打包器做静态分析；且默认未启用 prefers-reduced-motion 或 color-scheme 等渐进增强特性，后续补兼容逻辑反而加重运行时负担。
立即学习“前端免费学习笔记（深入）”；
- Bulma 的
is-*修饰符全部编译进最终 CSS，无法按需提取——即使你只用is-primary，is-success/is-warning仍存在 - Foundation 的 JavaScript 插件（如
Reveal、Dropdown）强耦合于其 CSS 结构，移除某组件样式可能导致 JS 报错Cannot read property 'top' of undefined - 若必须用，把 CSS 提取为
，JS 拆包并设async，避免阻塞渲染
自定义 CSS-in-JS 方案真比框架快？小心 runtime 开销反超
像 styled-components 或 emotion 在开发期确实灵活，但默认会在运行时将样式字符串注入 标签——每次组件渲染都触发 CSSOM 更新，高频交互页（如表格排序、实时搜索）容易卡顿。服务端渲染（SSR）下还可能因样式哈希不一致导致水合失败，报错 Prop `className` did not match。
对比传统框架：纯 CSS 文件由浏览器一次性解析缓存，无 JS 解析成本；而 CSS-in-JS 要走 JS 引擎 → 构造样式文本 → 插入 DOM → 触发重排重绘整条链路。
- 启用
babel-plugin-styled-components开启 SSR 支持和 displayName 优化 - 用
css函数抽离静态样式，避免模板字符串中写动态值：const buttonStyle = css`background: ${props => props.theme.primary};` // ❌
const buttonStyle = css`background: var(--primary);` // ✅ - 对动画、悬停等高频样式，退回原生
@keyframes+className切换，别用animate属性函数实时计算
真正影响性能的不是框架名，而是你如何加载它
一个 12KB 的 tailwind.css 如果放在 同步加载，比 45KB 的 bootstrap.css 异步加载 + media="print" 占位再 onload 替换，首屏速度反而更慢。关键路径上任何阻塞资源都会放大框架体积的影响。
最容易被忽略的是字体、图标、配色系统这些“配套资产”。比如 Bootstrap 5 默认引入 font-awesome 的完整 SVG 雪碧图，或 Tailwind 配置了 10 种字重却只用到 font-normal 和 font-bold——这些都在悄悄吃带宽和解析时间。
- 把框架 CSS 放在
末尾，用media="print"占位，再通过onload切换： - 禁用框架自带图标库，用
内联或 HTTP/2 推送关键图标 - 检查
font-family声明是否触发多阶段字体加载，优先用系统字体栈，如font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
