合理引入CSS可减少重排与重绘，提升渲染性能。1. 优先使用外部样式表以支持缓存；2. 关键CSS内联、非关键异步加载以优化首屏渲染；3. 避免频繁样式操作，用transform替代布局变动；4. 批量更新DOM并利用构建工具自动化优化。
在前端开发中，CSS 的引入方式不仅影响页面的结构和样式表现，还直接关系到浏览器的渲染性能。合理的引入策略可以有效减少重绘（repaint）和重排（reflow），提升页面加载速度与交互流畅度。
1. CSS 引入方式及其对渲染的影响
CSS 主要有三种引入方式：内联样式、内部样式表和外部样式表。不同方式在渲染过程中产生的影响各不相同。
- 内联样式（Inline Styles）：直接写在 HTML 标签的 style 属性中。优先级最高，但不利于维护，且每次修改都需要重新解析 DOM，容易触发重排。
- 内部样式表（Internal CSS）：使用 <style> 标签写在 HTML 文档头部。适用于单页专用样式，但无法缓存，每次加载都会重新下载解析。
- 外部样式表（External CSS）：通过 <link rel="stylesheet"> 引入独立的 CSS 文件。支持浏览器缓存，利于复用和维护，是推荐方式。
浏览器在构建渲染树时，必须等到 CSSOM 构建完成才能进行布局与绘制。因此，阻塞渲染的 CSS 资源应尽早加载，但也要避免过度阻塞。
2. 减少重排与重绘的关键策略
重排（reflow）发生在元素几何属性改变时，如宽高、位置等；重绘（repaint）则是在视觉样式变化但布局不变时发生，如颜色、背景。重排成本远高于重绘，应尽量避免。
立即学习“前端免费学习笔记（深入）”；
- 避免频繁操作样式属性：连续修改多个样式应合并为一次操作，例如使用 class 切换代替逐个设置 style。
- 使用 transform 替代 top/left 位移：transform 属于合成层操作，通常不触发重排，性能更优。
- 避免读写混合的 DOM 操作：如先读取 offsetTop 再设置 width，会强制浏览器同步刷新渲染树，引发多次重排。
- 批量更新 DOM：使用 documentFragment 或将元素脱离文档流（display: none）后再进行多次修改，最后重新插入。
3. 优化 CSS 引入以提升渲染效率
合理组织和加载 CSS 资源，能显著降低初始渲染延迟和运行时性能损耗。
- 关键路径优化：提取关键 CSS：将首屏必需的样式内联到 <head> 中，非关键 CSS 异步加载，加快首次渲染。
- 异步加载非核心 CSS：使用 media 属性或动态插入 link 标签，延迟打印样式或主题样式加载。
- 预加载重要资源：通过 <link rel="preload"> 提示浏览器提前加载关键 CSS 文件。
- 压缩与合并 CSS 文件：减少 HTTP 请求数量，缩短解析时间。
4. 实践建议与小结
实际项目中，应结合构建工具自动化处理 CSS 分离与内联，比如 Webpack 配合插件提取 critical CSS。同时，利用 Chrome DevTools 的 Performance 面板分析重排重绘频率，定位性能瓶颈。
基本上就这些。选择合适的引入方式，配合现代浏览器的渲染机制，从源头控制样式对布局的影响，才能真正实现高效渲染。不复杂但容易忽略的是细节处理——比如一个 display 的切换顺序，可能就决定了页面是否卡顿。
