在前端开发中，性能优化是一个关键点，而样式优化则是性能优化中不可忽视的一环。
笔者给出一些样式优化措施，包括减少重绘和重排、CSS 选择器优化、使用 CSS 预处理器和后处理器、CSS Sprite、Critical CSS 等技术。
1. 减少重绘和重排
重绘（Repaint）和重排（Reflow）是浏览器渲染过程中的两个重要步骤。重绘指的是元素外观的改变，不涉及布局；重排则是指元素的尺寸、位置发生变化，需要重新计算布局。重绘和重排都会消耗大量的计算资源，影响页面的性能。
优化建议：
- 减少 DOM 操作：尽量减少对 DOM 的直接操作，使用文档片段（Document Fragment）或一次性修改多个样式属性。
- 避免频繁获取计算样式：避免在循环中频繁访问计算样式，如
offsetWidth、clientHeight等，因为这会导致浏览器强制重排。 - 使用 CSS 变换替代位移：使用
transform属性替代top、left等位置调整属性，transform不会触发重排。 - 批量修改样式：通过修改 class 或使用 CSS Text 将多次样式变更合并为一次。
2. CSS 选择器优化
CSS 选择器的效率对页面性能有显著影响。浏览器解析 CSS 选择器时是从右向左匹配的，复杂的选择器会增加解析时间。
优化建议：
- 避免使用通配符选择器：如
*、[attr^="value"]等，尽量使用类选择器、ID 选择器。 - 减少后代选择器：后代选择器会匹配所有的子元素，尽量使用子选择器或更具体的选择器。
- 使用样式表缓存：避免频繁修改和加载外部样式表，可以使用内联样式或者合理设置缓存头。
3. 使用 CSS 预处理器和后处理器
CSS 预处理器（如 Sass、Less）和后处理器（如 PostCSS）可以帮助开发者编写更简洁、高效的 CSS 代码，同时支持自动添加浏览器前缀、压缩 CSS 文件等功能。
优化建议：
- 使用变量和混合：预处理器支持变量和混合（Mixin），可以减少重复代码，提高样式代码的维护性。
- 自动前缀：使用 Autoprefixer 等工具自动添加浏览器前缀，确保兼容性同时避免手动编写冗余代码。
- CSS 压缩：使用 CSSNano、csso 等工具压缩 CSS 文件，减少文件体积，加快页面加载速度。
4. 使用 CSS Sprite
CSS Sprite 是一种将多个小图片整合到一张大图片中的技术，减少 HTTP 请求次数，提高页面加载速度。
优化建议：
- 合理规划图片位置：使用工具（如 SpriteSmith）生成 Sprite 图片时，尽量将相关图片放在一起，减少偏移量计算。
- 使用背景位置：通过
background-position属性控制不同元素显示不同的部分，避免多次加载相同的图片资源。
5. Critical CSS
Critical CSS 是指在页面加载时最重要的 CSS。通过提取页面首屏渲染所需的 CSS，并将其内联在 HTML 中，可以显著减少渲染时间，提高首屏加载速度。
优化建议：
- 提取关键 CSS：使用工具（如 Critical、Penthouse）提取首屏渲染所需的关键 CSS。
- 内联关键 CSS：将提取的关键 CSS 内联在 HTML 文件的
<head>部分，其余的 CSS 文件延迟加载。
6. 其他优化措施
- 减少 CSS 文件大小：通过删除无用的 CSS 规则、压缩 CSS 文件等方式减少文件体积。
- 避免使用 @import：
@import会阻塞 CSS 加载，建议使用<link>标签引入外部样式表。（这个很关键） - 使用合适的字体格式：根据浏览器支持情况选择合适的字体格式（如 WOFF2），并合理设置字体加载策略（如
font-display属性）。
总结
样式优化是前端性能优化中至关重要的一部分。通过减少重绘和重排、优化 CSS 选择器、使用预处理器和后处理器、应用 CSS Sprite 技术、提取和内联关键 CSS，以及其他优化措施，可以显著提升页面的加载和渲染速度，从而改善用户体验。在实际项目中，开发者应根据具体情况选择合适的优化方案，并结合性能监测工具（如 Lighthouse、WebPageTest）进行持续优化。
标签：01,样式,---,使用,优化,选择器,CSS,加载 From： https://www.cnblogs.com/zx618/p/18340209