CSS通过link或style引入，阻塞渲染但不阻塞DOM解析，需构建CSSOM以避免FOUC；JS通过script引入，默认阻塞DOM解析，可使用async或defer实现异步加载，优化首屏性能。
在网页开发中，CSS 和 JS 都是构建页面表现与交互的核心资源，但它们的引入方式和加载行为存在明显差异。理解这些差异有助于优化页面性能、避免渲染阻塞和提升用户体验。
1. 引入方式的区别
CSS 引入方式：
- 通过 <link rel=”stylesheet” href=”https://www.php.cn/faq/style.css”> 标签引入外部样式表，这是最常见的方式。
- 使用 <style></style> 标签在 HTML 中嵌入内联样式。
- 通过 @import 指令在 CSS 文件中导入其他 CSS 文件（不推荐，影响性能）。
JS 引入方式：
- 通过 <script src=”https://www.php.cn/faq/script.js”></script> 引入外部脚本。
- 使用 <script></script> 标签嵌入内联 JavaScript 代码。
虽然语法形式不同，但关键区别在于它们对页面渲染的影响机制。
立即学习“前端免费学习笔记（深入）”；
2. 加载与执行行为对比
CSS 是渲染阻塞资源：
标书对比王
58
标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。
58
查看详情
- 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，所以默认阻塞解析。合理安排它们的引入位置和加载策略，是优化前端性能的关键步骤。
相关标签：
css javascript java html js 前端 浏览器 懒加载 区别 异步加载 延迟加载 JavaScript css html JS 对象 事件 dom 异步 href 样式表
大家都在看：
css边框颜色border-color设置技巧
CSS动画元素的初始状态如何设置_keyframes from与to技巧
CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化
CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践
在css中link标签跨域样式引入问题
CSS动画元素的初始状态如何设置_keyframes from与to技巧
CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化
CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践
在css中link标签跨域样式引入问题
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容