前端性能优化-CSS 相关的性能优化策略
前言
本节总结 CSS 相关的性能优化策略
内联首屏关键 CSS
将首屏关键 CSS 直接内联在 HTML 文档中，减少首次渲染时的请求延迟。
<head><style>/* 关键CSS规则 */body {margin: 0;padding: 0;font-family: "Arial", sans-serif;/* 其他关键样式 */}</style>
</head>
异步加载 CSS
使用 rel="preload"异步加载 CSS 文件，以减少首屏渲染的阻塞。
<head><linkrel="preload"href="styles.css"as="style"onload="this.onload=null;this.rel='stylesheet'"/><noscript><link rel="stylesheet" href="styles.css" /></noscript>
</head>
css 文件压缩
用工具对 CSS 文件进行压缩，去除不必要的空格、注释，减小文件体积。
# 使用工具（例如UglifyCSS）压缩CSS文件
uglifycss input.css > output.min.css合理使用选择器
避免使用过于复杂或冗长的选择器，选择器的匹配速度会影响页面性能。
/* 不推荐：过于复杂的选择器 */
ul li:first-child a.active {color: #ff0000;
}/* 推荐：简化选择器 */
.active-link {color: #ff0000;
}
减少使用昂贵的属性
尽量减少使用计算量大、触发回流和重绘的属性，如position: absolute, 而使用其他的方式替代
/* 不推荐：频繁使用position: absolute */
.element {position: absolute;top: 10px;left: 20px;
}/* 推荐：使用其他布局方式，避免频繁的重排和重绘 */
.element {margin-top: 10px;margin-left: 20px;
}
避免使用@import
避免使用@import 方式引入 CSS 文件，因为它会导致额外的请求，降低页面加载速度。
<!-- 不推荐：使用@import引入CSS文件 -->
<style>@import url("styles.css");
</style><!-- 推荐：直接使用link标签引入CSS文件 -->
<link rel="stylesheet" href="styles.css" />
本文首发于个人博客前端开发笔记，由于笔者能力有限，文章难免有疏漏之处，欢迎指正