CSS通过link或style引入，阻塞渲染但不阻塞DOM解析，需构建CSSOM以避免FOUC；JS通过script引入，默认阻塞DOM解析，可使用async或defer实现异步加载，优化首屏性能。
在网页开发中，CSS 和 JS 都是构建页面表现与交互的核心资源，但它们的引入方式和加载行为存在明显差异。理解这些差异有助于优化页面性能、避免渲染阻塞和提升用户体验。
1. 引入方式的区别
CSS 引入方式：
- 通过 <link rel="stylesheet" href="style.css"> 标签引入外部样式表，这是最常见的方式。
- 使用 <style></style> 标签在 HTML 中嵌入内联样式。
- 通过 @import 指令在 CSS 文件中导入其他 CSS 文件（不推荐，影响性能）。
JS 引入方式：
- 通过 <script src="script.js"></script> 引入外部脚本。
- 使用 <script></script> 标签嵌入内联 JavaScript 代码。
虽然语法形式不同，但关键区别在于它们对页面渲染的影响机制。
立即学习“前端免费学习笔记（深入）”；
2. 加载与执行行为对比
CSS 是渲染阻塞资源：
- CSS 文件会阻塞页面的首次渲染（即“关键渲染路径”），浏览器必须等 CSSOM 构建完成才能生成渲染树并显示内容。
- 即使 CSS 不阻塞 DOM 解析，也会延迟页面可见内容的输出，防止出现“无样式内容闪烁”（FOUC）。
- 浏览器会并行下载 CSS 资源，但不会完成渲染直到所有 CSS 处理完毕。
JS 是解析阻塞资源：
- 默认情况下，<script> 标签会阻塞 HTML 解析。当浏览器遇到 script 标签时，会暂停 DOM 构建，先下载并执行脚本。
- JavaScript 可能依赖当前 DOM 状态，也可能修改 DOM 或 CSS，因此必须按顺序执行以保证正确性。
- 可通过 async 或 defer 属性改变其加载行为，实现非阻塞加载。
3. 加载顺序与执行时机
CSS 加载顺序：
- 浏览器在解析 HTML 时，一旦发现 <link> 标签，就会立即发起 CSS 请求。
- CSS 下载完成后，会构建 CSSOM（CSS 对象模型），但不立即执行（因为没有“执行”概念）。
- 多个 CSS 文件按引入顺序合并到 CSSOM，后加载的样式可能覆盖前面的规则。
JS 加载与执行顺序：
- 默认同步加载：脚本按文档顺序下载并执行，前一个未完成，下一个不会开始。
- 添加 async 属性时，脚本异步下载，下载完成后立即中断 HTML 解析并执行。
- 添加 defer 属性时，脚本异步下载，但等到 HTML 解析完成后、DOMContentLoaded 事件前按顺序执行。
- 内联脚本（无 src）会立即执行，除非动态插入。
4. 对页面性能的影响
- CSS 应尽早引入（如放在 <head> 中），确保快速构建渲染树，减少白屏时间。
- 关键 CSS 可以内联，非关键 CSS 延迟加载或使用媒体查询分离。
- JS 尽量放在 <body> 底部，或使用 defer/async 避免阻塞页面解析。
- 大体积 JS 文件应拆分、压缩、懒加载，避免拖慢首屏渲染。
基本上就这些。CSS 控制视觉呈现，所以阻塞渲染；JS 控制逻辑和操作 DOM，所以默认阻塞解析。合理安排它们的引入位置和加载策略，是优化前端性能的关键步骤。
