内部CSS随HTML加载，减少请求但不可缓存；外部CSS可缓存、易维护，适合大项目。最佳实践是首屏关键CSS内联，其余外链异步加载，兼顾渲染速度与性能优化。
将CSS写在HTML的<head>中（内联样式或内部样式表）与引入外部CSS文件，主要在加载顺序、性能、维护性等方面存在差异。理解这些差异有助于优化网页渲染速度和开发效率。
1. CSS加载顺序与阻塞机制
浏览器解析HTML时，遇到CSS会暂停渲染以确保样式正确应用，这就是CSS是渲染阻塞资源的原因。
无论CSS是在<head>中还是外部文件，都会阻塞页面渲染，但加载方式影响实际表现：
- 内部CSS（写在head中）：随HTML一起下载，无需额外请求，解析到时立即可用。
- 外部CSS（link引用）：需要发起HTTP请求获取文件，存在网络延迟，可能稍晚生效。
因此，内部CSS通常更快进入渲染流程，但不利于缓存；外部CSS首次加载慢一点，但可被浏览器缓存，提升后续访问速度。
立即学习“前端免费学习笔记（深入）”；
2. 性能与资源管理
使用外部CSS文件更利于性能优化：
- 可缓存：用户第二次访问时，浏览器直接从缓存读取CSS，减少加载时间。
- 并行加载：现代浏览器可预加载中的CSS文件，配合CDN加速效果更好。
- 分离关注点：HTML负责结构，CSS负责样式，便于团队协作和维护。
而将CSS写在<head>中会增加HTML体积，每次访问都要重新下载，不利于复用和缓存。
3. 关键CSS内联，其余外链
最佳实践是：将首屏关键CSS内联到<head>中，非关键CSS通过外部文件异步或延迟加载。
例如：
<head><style>
/* 首屏所需的关键样式 */
header, .hero { display: block; ... }
</style>
<link rel="stylesheet" href="rest-of-styles.css" media="print" onload="this.media='all'">
</head>
这样既避免了外部请求对首屏渲染的延迟，又利用了外部文件的缓存优势。
4. 维护性与开发体验
项目规模较大时，外部CSS明显更易维护：
而将大量CSS写在HTML中会导致代码臃肿，难以调试和版本控制。
基本上就这些。关键在于平衡加载速度与可维护性：小项目或静态页可用内部样式；中大型项目推荐外部文件为主，关键CSS内联优化首屏体验。
