如果要做优化，CSS提高性能的方法有哪些？

写给小白的 CSS 性能优化指南：让你的页面飞起来

如果你刚开始学前端，可能会觉得 CSS 就是 "写样式"------ 把文字弄大、给按钮上色、排个版就行。但其实，CSS 不仅影响页面好不好看，还直接决定了页面 "跑" 得快不快。

想象一下：用户点进你的网页，半天加载不出来，或者滑动的时候卡顿掉帧，大概率会直接关掉。而很多时候，这些问题可能就藏在你写的 CSS 里。

今天就用大白话讲讲，怎么优化 CSS 让页面更流畅，哪怕是刚入门也能看懂～

为什么要优化 CSS？

简单说：CSS 会 "卡" 住页面渲染。

浏览器加载网页时，要先下载 HTML、CSS，再根据它们计算出页面长什么样（这个过程叫 "渲染"）。如果 CSS 写得不好，比如文件太大、规则太复杂，浏览器就会花更多时间处理，用户看到的就是 "加载中" 或者卡顿的页面。

优化 CSS，本质上就是帮浏览器 "减负"，让它更快地把页面呈现给用户。

6 个新手也能学会的 CSS 优化技巧

1. 关键 CSS 直接写在 HTML 里（内联）

你可能习惯把 CSS 写到单独的 .css 文件里，再用 <link> 引入 ------ 这没错，但有个小问题：浏览器得先下载完这个 CSS 文件，才能开始渲染页面。

如果是首屏必须的样式 （比如导航栏、头部 Banner），可以直接写到 HTML 的 <style> 标签里（这叫 "内联"）。这样浏览器下载完 HTML 就能立刻渲染，不用等外部 CSS 文件，首屏加载速度会快很多。

举个例子：

xml 复制代码

<!DOCTYPE html>
<html>
<head>
  <!-- 内联首屏关键 CSS -->
  <style>
    .header { height: 60px; background: #fff; }
    .banner { width: 100%; height: 200px; }
  </style>
  <!-- 非关键 CSS 还是外部引入 -->
  <link rel="stylesheet" href="other-styles.css">
</head>
<body>...</body>
</html>

⚠️ 注意：别把所有 CSS 都内联！太大的 CSS 会让 HTML 文件变胖，反而变慢。只内联首屏必须的那部分就好～

2. 给 CSS "瘦个身"（压缩）

写 CSS 时，我们会换行、加注释，方便自己看，但这些 "多余内容" 会让文件变大，下载变慢。

比如你写：

css 复制代码

/* 这是导航栏样式 */
.nav {
  width: 100%;
  height: 60px;
  background: #333;
}

压缩后会变成这样（去掉空格、换行、注释）：

css 复制代码

.nav{width:100%;height:60px;background:#333}

文件变小了，浏览器下载就更快。新手不用自己手动删，用 Webpack、Vite 这些工具打包时，会自动帮你压缩 CSS，记得开这个功能就行～

3. 别写 "绕弯子" 的选择器

浏览器读 CSS 选择器的方式很特别：从右往左看。

比如你写 #box .list li，浏览器会先找所有 <li>，再筛选出在 .list 里的，最后挑出在 #box 里的。如果选择器嵌套太多层（比如 div .container .list .item span），浏览器就得做很多 "筛选工作"，会变慢。

给新手的小建议：

别嵌套超过 3 层，比如 a:hover 就够了，别写成 div .nav ul li a:hover；
能用 ID 选择器（#box）就别嵌套，比如 #box { ... } 比 .container #box { ... } 快；
少用通配符 *（比如 * { margin: 0; }）和属性选择器（比如 input[type="text"]），它们会遍历所有元素，很费时间。

4. 少用 "费性能" 的属性

有些 CSS 属性看起来很酷，但浏览器渲染它们的时候要 "加班"。比如：

box-shadow（阴影）、border-radius（圆角）：需要计算额外的图形；
filter（滤镜，比如模糊、变色）：会让浏览器反复处理像素；
opacity（透明度）：改变时可能触发页面重新渲染。

这些属性用多了，页面滚动或动画时容易卡顿。新手可以尽量少用，或者用更简单的方式替代（比如用图片代替复杂阴影）。

5. 别用 @import 引入 CSS

引入 CSS 有两种方式：

xml 复制代码

<!-- 方式1：link 标签 -->
<link rel="stylesheet" href="style.css">

<!-- 方式2：@import（不推荐！） -->
<style>
  @import url("style.css");
</style>

为什么不推荐 @import？因为浏览器处理它时，得先下载完当前 CSS 文件，才能知道还要下载 style.css，相当于 "排队下载"；而 link 标签可以让多个 CSS 文件 "同时下载"，速度更快。

记住：引入 CSS 优先用 <link>，别用 @import～

6. 非关键 CSS 让它 "悄悄加载"（异步）

前面说过，CSS 会 "阻塞" 页面渲染 ------ 浏览器没下载完 CSS 时，页面可能是空白的。但有些 CSS 不是首屏必须的（比如打印样式、隐藏模块的样式），可以让它们 "异步加载"，不耽误页面渲染。

怎么做？简单来说，就是告诉浏览器："这个 CSS 不急，你慢慢下，先渲染页面"。比如：

xml 复制代码

<!-- 异步加载非关键 CSS -->
<link rel="stylesheet" href="print.css" media="print" onload="this.media='all'">

这里的 media="print" 告诉浏览器 "这是打印时用的，现在不用管"，等加载完后再通过 onload 改成正常样式，既不阻塞渲染，又能加载完整样式。

总结一下

CSS 优化没那么复杂，核心就是：让浏览器少干活、快干活。

新手刚开始不用追求完美，先记住这几点：关键 CSS 内联、压缩文件、选择器别太复杂、少用费性能的属性。慢慢在实际写代码时注意这些细节，你的页面就会越来越流畅～

最后想说：好的前端不只是 "实现效果"，更要让用户用得舒服。优化 CSS，就是让用户离你的网站更近一步呀～