前端 CSS 性能优化：减少样式渲染阻塞的代码_实现关键 css 内联,减少渲染阻塞-优快云博客

内联关键 CSS 将首屏渲染所需的关键 CSS 直接内联在 HTML 的 <head> 中，避免外部样式表的网络请求延迟。非关键CSS可以异步加载。

媒体查询优化 为 <link> 标签添加媒体属性，使浏览器根据设备条件选择性加载：

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="(max-width: 480px)">

异步加载非关键CSS 使用 preload 和 onload 实现异步加载：

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

减少选择器复杂度 避免深层嵌套选择器，如 .nav ul li a 简化为 .nav-link。浏览器从右向左匹配选择器，过长的链条会增加计算负担。

压缩与合并文件 使用工具如PostCSS/PurgeCSS移除未使用的CSS，通过Webpack等打包工具合并多个文件，减少HTTP请求次数。

使用CSS Containment 对独立模块启用布局隔离，限制浏览器重绘范围：

.widget {
  contain: layout paint style;
}

避免频繁触发布局 减少会引发重排的属性修改，如将动画元素设为 position: absolute 或使用 transform 代替 top/left 变化。

使用CSS变量替代重复值 将常用值定义为变量，便于统一管理并减少样式计算：

:root {
  --primary-color: #3498db;
}
.button {
  background: var(--primary-color);
}

采用CSS Grid/Flexbox 相比传统浮动布局，现代布局方案性能更优且代码更简洁，能减少布局计算时间。

使用 will-change 提示浏览器 对已知会变化的元素提前声明优化提示：

.animated-element {
  will-change: transform, opacity;
}

优先使用CSS动画 CSS动画比JavaScript动画性能更好，尽量使用 transition 和 @keyframes 实现视觉效果。