前端性能优化-CSS 相关的性能优化策略

逍遥的编程笔记

已于 2024-08-05 10:14:04 修改

阅读量373

点赞数 5

分类专栏：性能优化文章标签： css 性能优化前端

于 2024-08-05 09:47:51 首次发布

本文链接：https://blog.csdn.net/zhuanyemanong/article/details/140918810

版权

性能优化专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

本节总结 CSS 相关的性能优化策略

内联首屏关键 CSS

将首屏关键 CSS 直接内联在 HTML 文档中，减少首次渲染时的请求延迟。

<head>
  <style>
    /* 关键CSS规则 */
    body {
      margin: 0;
      padding: 0;
      font-family: "Arial", sans-serif;
      /* 其他关键样式 */
    }
  </style>
</head>

异步加载 CSS

使用 rel="preload"异步加载 CSS 文件，以减少首屏渲染的阻塞。

<head>
  <link
    rel="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" />